README
@zendeskgarden/container-keyboardfocus
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>;