react-selected v1.0.1
React Selected
A React component to build selectable components with accessibility in mind.
Listen to Belinda Carlisle - Summer Rain while reading these docs - it will increase comprehensibility by 120%.
Why should I use this?
React Selected has control over select logic and state meaning that you don't have to do much! It also has the ability to add WAI-ARIA compliant and other accessibility attributes to the selectable components.
Install
npm install react-selected
Example
import Selected from 'react-selected';
<Selected defaultSelectedKey="cat">
{({ getSelectableProps, selectedKey }) => (
<Buttons>
<Button color={selectedKey === 'dog' ? 'info' : null} {...getSelectableProps('dog')}>
Dog
</Button>
<Button color={selectedKey === 'cat' ? 'info' : null} {...getSelectableProps('cat')}>
Cat
</Button>
<Button color={selectedKey === 'mouse' ? 'info' : null} {...getSelectableProps('mouse')}>
Mouse
</Button>
</Buttons>
)}
</Selected>More examples
Props
defaultSelectedKey
Type: string
The key of the component that should be selected by default.
onSelect
Type: function({ key, value })
Function to invoke when a component is selected.
selectedKey
Type: string
React Selected manages select logic and state internally, but if you wish to have your own, you can control the value of selectedKey.
Render props
getSelectableProps
Type: function(key, value, props) (key is required)
Returns the props to apply to the button element you render.
Includes aria- attributes.
getElementSelectableProps
Type: function(key, value, props) (key is required)
Returns the props to apply to the element you render. Use this for any element other than a <button>. Includes aria- attributes.
select
Type: function(key, value)
Sets selectedKey to key and sets selectedValue to value.
selectedKey
Type: string
The key of the current selected component.
selectedValue
Type: string
The value of the current selected component.
Inspiration
License
MIT © jxom