https://github.com/sebinsua/react-choices

:clipboard: Component to build simple, flexible, and accessible choice components
https://github.com/sebinsua/react-choices

accessible checkbox choices component conventional ducks options radio react redux select simple state

Last synced: about 2 months ago
JSON representation

:clipboard: Component to build simple, flexible, and accessible choice components

• Host: GitHub
• URL: https://github.com/sebinsua/react-choices
• Owner: sebinsua
• License: mit
• Created: 2018-01-04T21:28:59.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2018-01-11T14:10:14.000Z (over 7 years ago)
• Last Synced: 2025-01-07T09:04:43.736Z (4 months ago)
• Topics: accessible, checkbox, choices, component, conventional, ducks, options, radio, react, redux, select, simple, state
• Language: JavaScript
• Homepage:
• Size: 330 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# `react-choices`

> Component to build simple, flexible, and accessible choice components

## The problem

You want a radio component that's simple and gives you complete control over rendering and state.

## The solution

`Choices` is a [`conventional-component` compatible](https://github.com/sebinsua/conventional-component) React component, that follows the patterns of [`react-toggled`](https://github.com/kentcdodds/react-toggled#this-solution) to expose an API that renders nothing and simply encapsulates the logic of a radio component.

## Installation

```

npm install --save react-choices

```

## Usage

```jsx

import React from 'react'

import { render } from 'react-dom'

import Choices from 'react-choices'

render(

  

    {({

      name,

      label,

      states,

      selectedValue,

      setValue,

      hoverValue

    }) => (

      


        


          {label}

        

        


          {states.map((state, idx) => (

            

              {state.label}

            

          ))}

        

      

    )}

  ,

  document.getElementById('root'),

)

```