React hook for auto focus on an element after rendering.
Usually, If we just want to focus on an element when it mounts (initially renders) a simple use of the autoFocus attribute will do.
But in the nested components we are difficult to handle initial focus element, for examples: Modal, Popover
yarn add use-initial-focus
Example: https://codesandbox.io/s/use-initial-focus-example-c8eyq
import {useFocus} from 'use-initial-focus';
const MyComponent = () => {
const initialFocus = useFocus();
return <button ref={ref}>My Button</button>;
};
MIT