@rooks/use-key
    TypeScript icon, indicating that this package has built-in type declarations

    4.11.2 • Public • Published

    @rooks/use-key

    Note: Future updates to this package have moved to the main package rooks. All hooks now reside in a single package which you can install using

    npm install rooks
    

    or

    yarn add rooks
    

    Rooks is completely treeshakeable and if you use only 1 of the 50+ hooks in the package, only that hook will be bundled with your code. Your bundle will only contain the hooks that you need. Cheers!

    TitleCard

    Build Status

    About

    keypress, keyup and keydown event handlers as hooks for react.

    Installation

    npm install --save @rooks/use-key
    

    Importing the hook

    import useKey from "@rooks/use-key";

    Usage

    Basic example with keydown

    function Demo() {
      const inputRef = useRef();
      function windowEnter(e) {
        console.log("[Demo 1] Enter key was pressed on window");
      }
      function vowelsEntered(e) {
        console.log("[Demo 1] You typed a vowel");
      }
      function capitalVowelsEntered(e) {
        console.log("[Demo 1] You typed a capital vowel");
      }
      // window is the target
      useKey(["Enter"], windowEnter);
      useKey(["a", "e", "i", "o", "u"], vowelsEntered, {
        target: inputRef
      });
      useKey(["A", "E", "I", "O", "U"], capitalVowelsEntered, {
        target: inputRef
      });
      return (
        <>
          <p>Press enter anywhere to trigger a console.log statement</p>
          <p>Press a,e,i,o,u in the input to trigger a console.log statement</p>
          <p>Press A,E,I,O,U in the input to trigger a different log statement</p>
          <input ref={inputRef} />
        </>
      );
    }
    
    render(<Demo />);

    Multiple kinds of events

    function Demo() {
      const inputRef = useRef();
      function onKeyInteraction(e) {
        console.log("[Demo 2]Enter key", e.type);
      }
    
      useKey(["Enter"], onKeyInteraction, {
        target: inputRef,
        eventTypes: ["keypress", "keydown", "keyup"]
      });
      return (
        <>
          <p>Try "Enter" Keypress keydown and keyup </p>
          <p>
            It will log 3 events on this input. Since you can listen to multiple
            types of events on a keyboard key.
          </p>
          <input ref={inputRef} />
        </>
      );
    }
    render(<Demo />);

    Conditionally setting handlers

    function Demo() {
      const inputRef = useRef();
      const [shouldListen, setShouldListen] = useState(false);
      function toggleShouldListen() {
        setShouldListen(!shouldListen);
      }
      function onKeyInteraction(e) {
        console.log("[Demo 3] Enter key", e.type);
      }
    
      useKey(["Enter"], onKeyInteraction, {
        target: inputRef,
        eventTypes: ["keypress", "keydown", "keyup"],
        when: shouldListen
      });
      return (
        <>
          <p>
            Enter key events will only be logged when the listening state is true.
            Click on the button to toggle between listening and not listening
            states.{" "}
          </p>
          <p>
            Handy for adding and removing event handlers only when certain
            conditions are met.
          </p>
          <input ref={inputRef} />
          <br />
          <button onClick={toggleShouldListen}>
            <b>{shouldListen ? "Listening" : "Not listening"}</b> - Toggle{" "}
          </button>
        </>
      );
    }
    render(<Demo />);

    Install

    npm i @rooks/use-key

    DownloadsWeekly Downloads

    2,099

    Version

    4.11.2

    License

    MIT

    Unpacked Size

    13 kB

    Total Files

    14

    Last publish

    Collaborators

    • avatar