Meet npm Pro: unlimited public & private packages + package-based permissions.Learn more »

@zendeskgarden/container-keyboardfocus

0.4.2 • Public • Published

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

Install

npm i @zendeskgarden/container-keyboardfocus

DownloadsWeekly Downloads

6,897

Version

0.4.2

License

Apache-2.0

Unpacked Size

27.6 kB

Total Files

9

Last publish

Collaborators

  • avatar