https://github.com/jxom/react-selected

React component to build flexible and accessible radio buttons/elements.
https://github.com/jxom/react-selected

Last synced: about 1 month 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 (about 6 years ago)
• Default Branch: master
• Last Pushed: 2019-10-18T00:37:28.000Z (over 4 years ago)
• Last Synced: 2024-05-11T22:43:11.747Z (about 2 months ago)
• Language: JavaScript
• Homepage: https://jxom.github.io/react-selected/
• Size: 470 KB
• Stars: 24
• Watchers: 3
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Lists

• 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)