cupid-dust

import React, { useImperativeHandle, useRef } from 'react';

type Props = {
  open: boolean;
  onClose: () => void;
  ref: HTMLDivElement | any;
};
const CustomModal = ({ open, onClose, ref }: Props) => {
  const closeRef = useRef<HTMLButtonElement>(null);
  const confirmRef = useRef<HTMLButtonElement>(null);

cupid-dust

import React from 'react';

type Props = {
  open: boolean;
  onClose: () => void;
  ref: HTMLDivElement | any;
};
const CustomModal = ({ open, onClose, ref }: Props) => {
  if (!open) return null;
  return (

cupid-dust

import React, { useState, useRef } from 'react';
import CustomModal from './custom-modal';

const Modal = () => {
  const [open, setOpen] = useState<boolean>(false);
  const ref = useRef<HTMLDivElement>(null);

  const onClose = (): void => {
    setOpen(false);
  };

cupid-dust

import React, { useImperativeHandle } from 'react';

const CustomField = (props: any, ref: HTMLInputElement | any) => {
  useImperativeHandle(
    ref,
    () => {
      return { alertValue: () => alert(props.value) };
    },
    [props.value]
  );

cupid-dust

import React, { useState, useRef } from 'react';
import CustomField from './custom-field';

const Form = () => {
  const [value, setValue] = useState<string>('');
  const ref: HTMLInputElement | any = useRef<HTMLInputElement>(null);

  return (
    <React.Fragment>
      <CustomField

cupid-dust

import React, { useImperativeHandle } from 'react';

const CustomField = (props: any, ref: HTMLInputElement | any) => {
  useImperativeHandle(ref, () => {
    return { alertHi: () => alert('Hola') };
  });
  return <input style={{ backgroundColor: 'red' }} {...props} />;
};

export default React.forwardRef(CustomField);

cupid-dust

import React from 'react';

const CustomField = (props: any, ref: HTMLInputElement | any) => {
  return <input ref={ref} style={{ backgroundColor: 'red' }} {...props} />;
};

export default React.forwardRef(CustomField);

cupid-dust

import React, { useState, useRef } from 'react';
import CustomField from './custom-field';

const Form = () => {
  const [value, setValue] = useState<string>('');
  const ref = useRef<HTMLInputElement>(null);

  return (
    <React.Fragment>
      <CustomField

cupid-dust

import React, { useState, useRef } from 'react';

const Form = () => {
  const [value, setValue] = useState<string>('');
  const ref = useRef<HTMLInputElement>(null);

  return (
    <React.Fragment>
      <input
        type='text'

cupid-dust

import React, { useId } from 'react';

const Login = () => {
  const id = useId();
  return (
    <React.Fragment>
      <div>
        <label htmlFor={`${id}-email`}>Email</label>
        <input id={`${id}-email`} type='email' />
      </div>