2.0.3 • Published 3 months ago
@zendeskgarden/container-focusvisible v2.0.3
@zendeskgarden/container-focusvisible
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>
);
};
2.0.3
3 months ago
2.0.2
7 months ago
2.0.1
9 months ago
2.0.0
10 months ago
1.0.6
11 months ago
1.0.5
1 year ago
1.0.4
1 year ago
1.0.2
1 year ago
1.0.1
2 years ago
0.4.10
2 years ago
1.0.0
2 years ago
0.4.9
2 years ago
0.4.8
3 years ago
0.4.7
3 years ago
0.4.6
3 years ago
0.4.5
4 years ago
0.4.4
4 years ago
0.4.3
4 years ago
0.4.2
4 years ago
0.4.1
4 years ago
0.4.0
4 years ago
0.3.0
4 years ago
0.2.1
4 years ago
0.2.0
5 years ago
0.1.0
5 years ago