Neptunium, Promethium, Manganese

    @zendeskgarden/container-keyboardfocus
    TypeScript icon, indicating that this package has built-in type declarations

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

    8,151

    Version

    0.4.11

    License

    Apache-2.0

    Unpacked Size

    30.3 kB

    Total Files

    9

    Last publish

    Collaborators

    • zendesk-garden