@zendeskgarden/container-keyboardfocus

@zendeskgarden/container-keyboardfocus

This package includes containers relating to keyboardfocus in the Garden Design System.

Installation

npm install @zendeskgarden/container-keyboardfocus

Usage

Check out storybook for live examples.

useKeyboardFocus

The useKeyboardFocus hook supplies state and props that help you to distinguish between mouse and keyboard focus.

import { useKeyboardFocus } from '@zendeskgarden/container-keyboardfocus';

const KeyboardFocus = () => {
  const { getFocusProps, keyboardFocused } = useKeyboardFocus();

  return (
    <div {...getFocusProps()}>{keyboardFocused ? 'Keyboard focused!' : 'Not keyboard focused'}</div>
  );
};

KeyboardFocusContainer

KeyboardFocsuContainer is a render-prop wrapper for the useKeyboardFocus hook.

import { KeyoardFocusContainer } from '@zendeskgarden/container-keyboardfocus';

<KeyboardFocusContainer>
  {({ keyboardFocused, getFocusProps }) => (
    <div {...getFocusProps()}>{keyboardFocused ? 'Keyboard focused!' : 'Not keyboard focused'}</div>
  )}
</KeyboardFocusContainer>;