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

    0.4.8 • Public • Published

    @zendeskgarden/container-focusvisible npm version

    This package includes containers relating to the :focus-visible polyfill in the Garden Design System.

    Installation

    npm install @zendeskgarden/container-focusvisible

    Usage

    For live examples check out our storybook.

    useFocusVisible

    import { useRef } from 'react';
    import styled from 'styled-components';
    import { useFocusVisible } from '@zendeskgarden/container-focusvisible';
    
    const FocusVisibleButton = styled.button`
      :focus {
        outline: none;
      }
    
      /* Apply custom focus styling based on className */
      &.garden-focus-visible {
        outline: 2px dashed red;
      }
    
      /* Apply custom focus styling based on data attribute */
      &[data-garden-focus-visible] {
        outline: 2px dashed red;
      }
    `;
    
    const Example = () => {
      const scope = useRef();
      useFocusVisible({ scope });
    
      return (
        <div ref={scope}>
          <FocusVisibleButton>
            This element receives focus-visible className and data attribute
          </FocusVisibleButton>
        </div>
      );
    };

    FocusVisibleContainer

    import { FocusVisibleContainer } from '@zendeskgarden/container-focusvisible';
    
    const Example = () => {
      const scope = useRef();
    
      return (
        <FocusVisibleContainer scope={scope} className="custom-focus-visible-class">
          <div ref={scope}>
            <button>Hello world</button>
            <input placeholder="some elements always receive focus-visible" />
          </div>
        </FocusVisibleContainer>
      );
    };

    Install

    npm i @zendeskgarden/container-focusvisible

    DownloadsWeekly Downloads

    5,364

    Version

    0.4.8

    License

    Apache-2.0

    Unpacked Size

    37.5 kB

    Total Files

    9

    Last publish

    Collaborators

    • zendesk-garden