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

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

Check out storybook for live examples.

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>
  );
};

Package Sidebar

Install

npm i @zendeskgarden/container-focusvisible

Weekly Downloads

99,798

Version

2.0.6

License

Apache-2.0

Unpacked Size

29.5 kB

Total Files

8

Last publish

Collaborators

  • zendesk-garden