Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jxom/react-selected
React component to build flexible and accessible radio buttons/elements.
https://github.com/jxom/react-selected
Last synced: 17 days ago
JSON representation
React component to build flexible and accessible radio buttons/elements.
- Host: GitHub
- URL: https://github.com/jxom/react-selected
- Owner: jxom
- License: mit
- Created: 2018-06-07T08:35:00.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2019-10-18T00:37:28.000Z (about 5 years ago)
- Last Synced: 2024-10-04T12:58:17.255Z (about 1 month ago)
- Language: JavaScript
- Homepage: https://jxom.github.io/react-selected/
- Size: 470 KB
- Stars: 25
- Watchers: 3
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-react-render-props - react-selected
- awesome-react-headless-components - React Selected - React component to build flexible and accessible radio buttons/elements (Libraries)
- awesome-react-render-props - react-selected
README
# React Selected
> React component to build flexible and accessible radio buttons/elements.
Listen to [Belinda Carlisle - Summer Rain](https://www.youtube.com/watch?v=wssIZOBV9i4) while reading these docs - it will increase comprehensibility by 120%. [This](https://youtu.be/R_TcZ-ATihY?t=5m10s) will increase it by 420%.
## 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 elements.
## Install
`npm install react-selected`
## Example
```jsx
import Selected from 'react-selected';
{({ getSelectableProps, selectedKey }) => (
Dog
Cat
Mouse
)}
```
### More examples
- [Storybook](https://jxom.github.io/react-selected/)
- [Storybook Stories](https://github.com/jxom/react-selected/blob/master/src/__stories__/index.stories.js)
## 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](https://github.com/paypal/downshift)
- [React Toggled](https://github.com/kentcdodds/react-toggled)
## License
MIT © [jxom](http://jxom.io)