useImperativeHandle.md

useImperativeHandle hook

useImperativeHandle customizes the instance value that is exposed to parent components when using ref

Notes:

• It's mostly used in combination with React.forwardRef
• It's a way to mimic the ref prop in class components (see this reply for more information).

Example

• CodeSandBox: useImperativeHandle hook

  • It contains a customized input field.
  • Example taken and adapted from this StackOverFlow reply.

Another example

You might want to customize the measureInWindow property of an input to measure a wrapper around it instead of the input field itself.