DEV Community

rabbitzzc
rabbitzzc

Posted on

useEnterCallback

import React, { useEffect, useRef } from 'react';

const useEnterCallback = (callback) => {
  const inputRef = useRef(null);

  useEffect(() => {
    const handleKeyPress = (event) => {
      // deprecated keyCode =  13
      if (event.key === 'Enter' || event.code === 'Enter') {
        callback(inputRef.current.value);
      }
    };

    inputRef.current.addEventListener('keydown', handleKeyPress);

    return () => {
      inputRef.current.removeEventListener('keydown', handleKeyPress);
    };
  }, [callback]);

  return inputRef;
};

const MyComponent = () => {
  const inputRef = useEnterCallback((value) => {
    console.log('Enter pressed! Value:', value);
  });

  return <input ref={inputRef} />;
};
Enter fullscreen mode Exit fullscreen mode

Top comments (0)