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

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

    Check out storybook for live examples.

    useKeyboardFocus

    The useKeyboardFocus hook supplies state and props that help you to distinguish between mouse and keyboard focus.

    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,422

    Version

    1.0.0

    License

    Apache-2.0

    Unpacked Size

    32 kB

    Total Files

    9

    Last publish

    Collaborators

    • zendesk-garden