Skip to content

Configuration

useNormalizedKeys is designed to work out of the box with minimal configuration, but provides options for customization.

Options

enabled

  • Type: boolean
  • Default: true
  • Description: Controls whether the hook is active and listening for keyboard events
tsx
const keys = useNormalizedKeys({ enabled: false });

This is useful when you need to temporarily disable keyboard handling, such as when a modal is open or the editor is inactive.

Dynamic Configuration

You can change the configuration dynamically by passing different options:

tsx
function EditorComponent() {
  const [isPaused, setIsPaused] = useState(false);
  const keys = useNormalizedKeys({ enabled: !isPaused });
  
  return (
    <div>
      <button onClick={() => setIsPaused(!isPaused)}>
        {isPaused ? 'Resume' : 'Pause'}
      </button>
      {!isPaused && (
        <p>Last key: {keys.lastKey}</p>
      )}
    </div>
  );
}

Advanced Usage Patterns

Multiple Hook Instances

You can use multiple instances of the hook for different purposes:

tsx
function ComplexEditor() {
  const editorKeys = useNormalizedKeys({ enabled: editorActive });
  const menuKeys = useNormalizedKeys({ enabled: menuActive });
  
  // Each instance tracks keyboard state independently
}

Conditional Enabling

tsx
function ModalExample() {
  const [modalOpen, setModalOpen] = useState(false);
  const keys = useNormalizedKeys({ enabled: !modalOpen });
  
  // Keyboard handling is disabled when modal is open
}

Future Configuration Options

The following configuration options are planned for future releases:

  • Key mapping customization - Override default key normalization
  • Event filtering - Specify which keys to listen for
  • Performance tuning - Adjust update frequency for specific use cases

Stay tuned for updates!

Released under the MIT License.