@vdslruf/use-ref-event-listener

Simple custom hooks for RefObjects

This hook was inspired by useEventListener

Installation

npm i @vdslruf/use-ref-event-listener

Usage

const refObject = useRefEventListener(eventName, handler, options);

Parameters

Here are the parameters that you can use. (* = optional)

Return

RefObject

Use Case

Like native change events, it dispatches when the change is finalized.

function App(){
  const [ state, setState ] = useState('');

  const ref = useRefEventListener('change', e => setState(e.target.value));
  return (
    <>
      <input ref={ref} />
      <output>{state}</output>
    </>
  )
}

Use various DOM API events that React does not support.

function App(){
  const [ log, setLog ] = useState('');
  const ref = useRefEventListener('beforeinput', e => setLog(e.target.value));
  return (
    <>
      <input ref={ref} />
      <output>previous value: {log}</output> 
    </>
  )
}

TypeScript

function Div(props){
  const ref = useRefEventListener<HTMLDivElement>('click', ~);
  return <div ref={ref} {...props}>{props.children}</div>
}

License

MIT Licensed