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

• Storybook
• Storybook Stories

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

• Downshift
• React Toggled

License

MIT © jxom