@zendeskgarden/container-selection v3.1.2
@zendeskgarden/container-selection
This package includes containers relating to selection in the Garden Design System.
Installation
npm install @zendeskgarden/container-selection
Usage
Check out storybook for live examples.
useSelection
The useSelection
hook which manages an items focus state including keyboard controls,
aria attributes and RTL support. It uses the
roving tab index strategy.
import { useSelection } from '@zendeskgarden/container-selection';
const values = ['Value 1', 'Value 2', 'Value 3'];
const Selection = ({ direction }) => {
const { focusedValue, selectedValue, getGroupProps, getElementProps } = useSelection({
values,
direction
});
return (
<ul {...getGroupProps()}>
{values.map(value => {
const isSelected = selectedValue === value;
const isFocused = focusedValue === value;
return (
<li {...getElementProps({ key: value, value })}>
{value}
{isSelected && <div>[Selected]</div>}
{isFocused && <div>(Focused)</div>}
</li>
);
})}
</ul>
);
};
SelectionContainer
import { SelectionContainer } from '@zendeskgarden/container-selection';
const values = ['Value 1', 'Value 2', 'Value 3'];
<SelectionContainer direction="vertical" values={values}>
{({ selectedValue, focusedValue, getGroupProps, getElementProps }) => (
<ul {...getGroupProps()}>
{values.map(value => {
const isSelected = value === selectedValue;
const isFocused = value === focusedValue;
return (
<li {...getElementProps({ key: value, value })}>
{item}
{isSelected && <span> - Selected</span>}
{isFocused && <span> - Focused</span>}
</li>
);
})}
</ul>
)}
</SelectionContainer>;
3 months ago
4 months ago
6 months ago
6 months ago
11 months ago
11 months ago
11 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago