useRef

[deleonjuan]

How do I use this along with useRef

I'm handling an input with useRef but Idk how should I convine this, can someone help me?

const inputRef = useRef<any>(null)

 <Input
ref={inputRef}
className="-ms-px rounded-s-none shadow-none focus-visible:z-10"
placeholder={props.placeholder}
onChange={onValueChange}
value={inputRef.current.value}
/>

[DaviMedrade]

You can get a ref by creating the mask with useInputMask, then pass it to the input and you can use it as you would.

In the sample code below, the handleBlur callback is just an example to show how the ref returned by useInputMask, when passed to an input, activates the mask on it and still provides access to the DOM element (<Form.Control> is from react-bootstrap, but a bare <input> works too).

import { useInputMask } from "use-mask-input";

const [zipCode, setZipCode] = useState<string>(null);

const zipCodeRef = useInputMask({ mask: "99999-999", options: { autoUnmask: true }});

const handleBlur = useCallback(() => {
  setTimeout(() => {
    zipCodeRef.current.focus();
  }, 2000);
}, [zipCodeRef]);

return <Form.Control ref={ zipCodeRef } value={ zipCode ?? "" }
  onChange={(e) => setZipCode(e.currentTarget.value)} onBlur={ handleBlur } />;