@zendeskgarden/container-keyboardfocus

Containers relating to keyboard focus in the Garden Design System

Usage no npm install needed!

<script type="module">
  import zendeskgardenContainerKeyboardfocus from 'https://cdn.skypack.dev/@zendeskgarden/container-keyboardfocus';
</script>

README

@zendeskgarden/container-keyboardfocus npm version

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

Installation

npm install @zendeskgarden/container-keyboardfocus

Usage

For live examples check out our storybook.

useKeyboardFocus

The useKeyboardFocus hook supplies state and props that help you to distinguish between mouse and keyboard focus. Garden uses this in react-components to know when to add the focus ring.

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>;