react-selected

A react component to handle select state

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
react-selected
2411.0.16 years ago6 years agoMinified + gzip package size for react-selected in KB

Readme

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