This package includes containers relating to keyboardfocus in the Garden Design System.
npm install @zendeskgarden/container-keyboardfocus
For live examples check out our storybook.
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 = ;return<div >keyboardFocused ? 'Keyboard focused!' : 'Not keyboard focused'</div>;;
KeyboardFocsuContainer is a render-prop wrapper for the
import KeyoardFocusContainer from '@zendeskgarden/container-keyboardfocus';<KeyboardFocusContainer>keyboardFocused getFocusProps<div >keyboardFocused ? 'Keyboard focused!' : 'Not keyboard focused'</div></KeyboardFocusContainer>;