@snappmarket/use-focus v0.2.5

useFocus

😵 focus on every thing you want

get started

We provide two way of using this package single or multi :

npm i @snappmarket/use-focus
OR
npm i @snappmarket/hooks

usage

import useFocus from '@snappmarket/use-focus';
// or 
// import { useFocus } from '@snappmarket/hooks';


const MyComponenet = props => {
  const focusRef = useFocus(null);

  return (<input type="text" ref={focusRef}/>)
};

source code

import { useEffect, useRef } from 'react';

/**
 * Focus on a ref after render
 * @param initialRef
 * @returns {React.MutableRefObject<*>}
 */
export default initialRef => {
  const ref = useRef(initialRef);
  useEffect(() => {
    setTimeout(() => {
      ref.current.focus();
    }, 100);
  }, []);

  return ref;
};