Nascent Personality Manifestation

npm

Share private packages across your team with npm Orgs, now with simplified billing via the aws marketplace!Learn more »

@zendeskgarden/container-keyboardfocus

0.2.4 • 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

348

version

0.2.4

license

Apache-2.0

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability