{"id":22314437,"url":"https://github.com/alvarobernalg/react-switchable","last_synced_at":"2025-10-04T18:30:27.496Z","repository":{"id":32527062,"uuid":"135424460","full_name":"AlvaroBernalG/react-switchable","owner":"AlvaroBernalG","description":"A react primitive for building switchable components","archived":false,"fork":false,"pushed_at":"2023-04-25T02:11:15.000Z","size":8842,"stargazers_count":5,"open_issues_count":8,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-05-31T09:51:22.878Z","etag":null,"topics":["control","overlay","primitives","radio","radiogroup","react","switch","toggle"],"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/AlvaroBernalG.png","metadata":{"files":{"readme":"README.md","changelog":null,"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}},"created_at":"2018-05-30T10:04:33.000Z","updated_at":"2024-07-06T21:12:49.000Z","dependencies_parsed_at":"2023-12-19T01:01:31.792Z","dependency_job_id":"4112c1d2-2d8a-4345-9cb2-9b8ae10f37e6","html_url":"https://github.com/AlvaroBernalG/react-switchable","commit_stats":{"total_commits":149,"total_committers":2,"mean_commits":74.5,"dds":"0.020134228187919434","last_synced_commit":"5d36f93a1a3de1443065c91bcb45a4c4a45dca09"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/AlvaroBernalG/react-switchable","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlvaroBernalG%2Freact-switchable","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlvaroBernalG%2Freact-switchable/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlvaroBernalG%2Freact-switchable/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlvaroBernalG%2Freact-switchable/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AlvaroBernalG","download_url":"https://codeload.github.com/AlvaroBernalG/react-switchable/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlvaroBernalG%2Freact-switchable/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262213247,"owners_count":23276069,"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":["control","overlay","primitives","radio","radiogroup","react","switch","toggle"],"created_at":"2024-12-03T22:10:01.369Z","updated_at":"2025-10-04T18:30:22.429Z","avatar_url":"https://github.com/AlvaroBernalG.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# [react](https://reactjs.org)-switchable\n\n[![react-switchable](https://travis-ci.org/AlvaroBernalG/react-switchable.svg?branch=master\n)](https://badge.fury.io/js/react-switchable)\n[![npm\nversion](https://badge.fury.io/js/react-switchable.svg)](https://badge.fury.io/js/react-switchable)\n[![License](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/AlvaroBernalG/react-switchable/blob/master/LICENSE)\n\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://lab.alvarobg.com/react-switchable/assets/example.gif\"/\u003e\n  \u003cbr\u003e\u003cbr\u003e\n  \u003cb\u003e A customizable and simple to use React primitive for building switchable components, inspired by \u003ca href=\"https://github.com/markusenglund/react-switch\"\u003e react-switch\u003c/a\u003e. \u003c/b\u003e\n  \u003cbr\u003e\u003cbr\u003e\n\u003c/p\u003e\n\n---\n\n\n## Install\n\n```bash\nnpm install react-switchable --save\n```\n\n\n## Usage\n\n```jsx\nimport Switch, { Item } from 'react-switchable';\nimport 'react-switchable/dist/main.css'\n\n\u003cSwitch \n  name=\"temperature\"\n  onItemChanged={newValue =\u003e console.log('The new value is =\u003e ', newValue)}\u003e\n  \u003cItem value='Hot'\u003e\n    Hot\n  \u003c/Item\u003e\n  \u003cItem value='Cold'\u003e\n    Cold\n  \u003c/Item\u003e\n\u003c/Switch\u003e\n```\n\nYou can have as many Item children as you can fit:\n\n```jsx\nimport Switch, { Item } from 'react-switchable';\nimport 'react-switchable/dist/main.css'\n\n\u003cdiv\u003e\n  \u003ch1\u003eWhat is the capital of Venezuela ?\u003c/h1\u003e\n  \u003cSwitch\n    name=\"countries\"\n    onItemChanged={capital =\u003e checkAnswer(capital)}\u003e\n    \u003cItem value='London'\u003e\n      London\n    \u003c/Item\u003e\n    \u003cItem value='Caracas'\u003e\n      Caracas\n    \u003c/Item\u003e\n    \u003cItem value='Lagos'\u003e\n      Lagos\n    \u003c/Item\u003e\n    \u003cItem value='Beijing'\u003e\n      Beijing\n    \u003c/Item\u003e\n    \u003cItem value='Moscow'\u003e\n      Moscow\n    \u003c/Item\u003e\n  \u003c/Switch\u003e\n\u003c/div\u003e\n```\n\n## Data flow\n\nBy default the switchable component manages which `\u003cItem /\u003e` is active internally. You can change that by setting the `active` attribute in any `\u003cItem /\u003e` component.\n\nData flow from parent to child :\n\n```js\nclass App extends React.Commponent {\n  state = {\n    selectedCountryIndex: 1,\n    countries: [\n      { value: \"Russia\" },\n      { value: \"Nigeria\" },\n      { value: \"Venezuela\" },\n      { value: \"France\" }\n    ]\n  }\n\n  render() {\n    return (\n      \u003cSwitch\n        name=\"countries\"\n        onItemSelected={(selectedIndex) =\u003e {\n          this.setState({\n            selectedCountryIndex: selectedIndex\n          })\n        }}\n      \u003e\n        {countries.map((country, index) =\u003e (\n          \u003cItem \n            key={country.value} \n            active={index === selectedCountryIndex} \n            value={country.value}\u003e\n              {country.value}\n          \u003c/Item\u003e\n        ))}\n      \u003c/Switch\u003e\n    )\n  }\n}\n```\n\nData flow from child to parent:\n\n```js\nclass App extends React.Commponent {\n  state = {\n    selectedCountry: \"Nigeria\"\n  }\n\n  render() {\n    return (\n      \u003cSwitch\n        name=\"countries\"\n        onItemChanged={country =\u003ethis.setState({ selectedCountry: country })}\u003e\n        \u003cItem value=\"Russia\"\u003eRussia\u003c/Item\u003e\n        \u003cItem default value=\"Nigeria\"\u003e\n          Nigeria\n        \u003c/Item\u003e\n        \u003cItem value=\"Venezuela\"\u003e Venezuela \u003c/Item\u003e\n        \u003cItem value=\"France\"\u003e France \u003c/Item\u003e\n      \u003c/Switch\u003e\n    )\n  }\n}\n```\n\n## Accessible\n\nCreated with accessibility in mind. The following `gif` was made using MacOS\nSierra `VoiceOver`.\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://lab.alvarobg.com/react-switchable/assets/accessible.gif\"/\u003e\n  \u003cbr\u003e\u003cbr\u003e\n  \u003cbr\u003e\u003cbr\u003e\n\u003c/p\u003e\n\n\n## Live demo\n\n[![Try it online](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/react-switchable-alvarobernalg-lp823)\n\n## API\n\n### Switch\n\nProp | Type | Required | Default | Description\n-----|------|----------|---------|-------------\n`name`| string | Yes |  \"\" | Unique global identifier.\n`children` | Array[Item] | Yes | [] | A list of Items.\n`onItemChanged`| function | No |  \"\" | Fires after the selection of an Item.\n`onItemSelected`| function | No |  \"\" | Fires when an Item is selected.\n`disable` | boolean | No | false | Disables the switch.\n`arrowSelection` | boolean | No | true | Enables the selection of Items with arrow keys.\n`customOverlay` | Overlay | No | undefined | Enables the use of a custom overlay React component.\n\nInherits all other properties assigned from the parent component\n\n### State | Item\n\nProp | Type | Required | Default | Description\n-----|------|----------|---------|-------------\n`value`| string | Yes |  \"\" | Represents the Item value.\n`active` | boolean | No | false | Sets the Item as active.\n`disable` | boolean | No | false | Disables the Item.\n`default` | boolean | No | false | Which Item should be active by default.\n\nInherits all other properties assigned from the parent component.\n\n### Overlay\n\nProp | Type | Required | Default | Description\n-----|------|----------|---------|-------------\n`selectedIndex`| number | Yes |  \"\" | The selected Item index.\n`totalItems` | number | Yes | \"\" | The total number of Items.\n\nInherits all other properties assigned from the parent component.\n\n\n\n## Related\n\n[react-sn-question](https://github.com/AlvaroBernalG/react-sn-question)\n\n## Contributing\n\nAll contributions are welcome.\n\n## License\n\nMIT license @[Alvaro Bernal G](https://alvarobg.com).\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falvarobernalg%2Freact-switchable","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falvarobernalg%2Freact-switchable","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falvarobernalg%2Freact-switchable/lists"}