{"id":15434007,"url":"https://github.com/sebinsua/react-choices","last_synced_at":"2026-05-09T09:02:31.425Z","repository":{"id":143142243,"uuid":"116309391","full_name":"sebinsua/react-choices","owner":"sebinsua","description":":clipboard: Component to build simple, flexible, and accessible choice components ","archived":false,"fork":false,"pushed_at":"2018-01-11T14:10:14.000Z","size":338,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-07-05T13:06:54.947Z","etag":null,"topics":["accessible","checkbox","choices","component","conventional","ducks","options","radio","react","redux","select","simple","state"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sebinsua.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-01-04T21:28:59.000Z","updated_at":"2020-02-17T22:38:08.000Z","dependencies_parsed_at":null,"dependency_job_id":"2480aef4-0f57-48bc-a087-f9ccb29c1bb7","html_url":"https://github.com/sebinsua/react-choices","commit_stats":{"total_commits":43,"total_committers":1,"mean_commits":43.0,"dds":0.0,"last_synced_commit":"01d3ee4abbce16c368a865dbe5f9295ceea83bb5"},"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"purl":"pkg:github/sebinsua/react-choices","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sebinsua%2Freact-choices","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sebinsua%2Freact-choices/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sebinsua%2Freact-choices/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sebinsua%2Freact-choices/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sebinsua","download_url":"https://codeload.github.com/sebinsua/react-choices/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sebinsua%2Freact-choices/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265949882,"owners_count":23853647,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["accessible","checkbox","choices","component","conventional","ducks","options","radio","react","redux","select","simple","state"],"created_at":"2024-10-01T18:36:38.924Z","updated_at":"2026-05-09T09:02:26.382Z","avatar_url":"https://github.com/sebinsua.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# `react-choices`\n\n\u003e Component to build simple, flexible, and accessible choice components\n\n## The problem\n\nYou want a radio component that's simple and gives you complete control over rendering and state.\n\n## The solution\n\n`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.\n\n## Installation\n\n```\nnpm install --save react-choices\n```\n\n## Usage\n\n```jsx\nimport React from 'react'\nimport { render } from 'react-dom'\nimport Choices from 'react-choices'\n\nrender(\n  \u003cChoices\n    name=\"speed\"\n    label=\"Speed\"\n    availableStates={[\n      { value: 'S' },\n      { value: 'M' },\n      { value: 'F' }\n    ]}\n    defaultValue=\"M\"\n  \u003e\n    {({\n      name,\n      label,\n      states,\n      selectedValue,\n      setValue,\n      hoverValue\n    }) =\u003e (\n      \u003cdiv\n        className=\"choices\"\n        role=\"radiogroup\"\n        aria-labelledby={`choices__label-${name}`}\n        aria-activedescendant={`choice-${selectedValue}`}\n      \u003e\n        \u003cdiv id={`choices__label-${name}`} className=\"choices__label\"\u003e\n          {label}\n        \u003c/div\u003e\n        \u003cdiv className=\"choices__items\"\u003e\n          {states.map((state, idx) =\u003e (\n            \u003cbutton\n              key={`choice-${idx}`}\n              id={`choice-${state.value}`}\n              tabIndex={state.selected ? 0 : -1}\n              className={cx('choice', state.inputClassName, {\n                'choice--focused': state.focused,\n                'choice--hovered': state.hovered,\n                'choice--selected': state.selected\n              })}\n              onMouseOver={hoverValue.bind(null, state.value)}\n              onClick={setValue.bind(null, state.value)}\n              role=\"radio\"\n              aria-checked={state.selected ? 'true' : 'false'}\n            \u003e\n              {state.label}\n            \u003c/button\u003e\n          ))}\n        \u003c/div\u003e\n      \u003c/div\u003e\n    )}\n  \u003c/Choices\u003e,\n  document.getElementById('root'),\n)\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsebinsua%2Freact-choices","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsebinsua%2Freact-choices","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsebinsua%2Freact-choices/lists"}