{"id":27689550,"url":"https://github.com/cangoektas/react-on-off","last_synced_at":"2025-04-25T10:18:53.483Z","repository":{"id":57140672,"uuid":"129970288","full_name":"cangoektas/react-on-off","owner":"cangoektas","description":"Flexible React components to manage on/off states","archived":false,"fork":false,"pushed_at":"2020-02-01T02:01:41.000Z","size":2185,"stargazers_count":22,"open_issues_count":13,"forks_count":0,"subscribers_count":0,"default_branch":"next","last_synced_at":"2025-04-25T10:18:47.581Z","etag":null,"topics":["off","on","react","state","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/cangoektas.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-04-17T22:03:47.000Z","updated_at":"2023-07-27T16:15:39.000Z","dependencies_parsed_at":"2022-09-01T23:50:30.830Z","dependency_job_id":null,"html_url":"https://github.com/cangoektas/react-on-off","commit_stats":null,"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cangoektas%2Freact-on-off","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cangoektas%2Freact-on-off/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cangoektas%2Freact-on-off/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cangoektas%2Freact-on-off/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cangoektas","download_url":"https://codeload.github.com/cangoektas/react-on-off/tar.gz/refs/heads/next","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250796362,"owners_count":21488713,"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":["off","on","react","state","toggle"],"created_at":"2025-04-25T10:18:52.885Z","updated_at":"2025-04-25T10:18:53.472Z","avatar_url":"https://github.com/cangoektas.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://cdn.rawgit.com/cangoektas/react-on-off/master/assets/logo.svg\" alt=\"react-on-off\" height=\"48\"\u003e\n  \u003ch3 align=\"center\"\u003ereact-on-off\u003c/h3\u003e\n  \u003cp align=\"center\"\u003e\n    Flexible React components to manage on/off states\n  \u003c/p\u003e\n  \u003cp align=\"center\"\u003e\n    \u003ca href=\"https://travis-ci.org/cangoektas/react-on-off\" alt=\"Build status\"\u003e\u003cimg src=\"https://img.shields.io/travis/cangoektas/react-on-off.svg?style=flat-square\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://codecov.io/gh/cangoektas/react-on-off\" alt=\"Code coverage\"\u003e\u003cimg src=\"https://img.shields.io/codecov/c/github/cangoektas/react-on-off.svg?style=flat-square\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://unpkg.com/react-on-off@^1/dist/\" alt=\"Build size\"\u003e\u003cimg src=\"http://img.badgesize.io/https://unpkg.com/react-on-off@^1/dist/index.umd.min.js?label=size\u0026style=flat-square\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://unpkg.com/react-on-off@^1/dist/\" alt=\"Build size gzipped\"\u003e\u003cimg src=\"http://img.badgesize.io/https://unpkg.com/react-on-off@^1/dist/index.umd.min.js?compression=gzip\u0026label=gzip%20size\u0026style=flat-square\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/react-on-off\" alt=\"npm version\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/react-on-off.svg?style=flat-square\"\u003e\u003c/a\u003e\n  \u003c/p\u003e\n\u003c/p\u003e\n\n## Table of contents\n\n* [Motivation](#motivation)\n* [Inspiration](#inspiration)\n* [Installation](#installation)\n* [Components](#components)\n  * [OnOff](#onoff)\n  * [OnOffCollection](#onoffcollection)\n  * [OnOffItem](#onoffitem)\n* [Related](#related)\n* [License](#license)\n\n## Motivation\n\nMany UI components either have a single or multiple on/off states and require\nyou to write the same type of stateful React components over and over again.\nIt's not hard, but it takes time and duplicates code. Instead, we can extract\ncommon state requirements into generic, flexible and well-tested components\nand reuse them. This is what `react-on-off` is.\n\n## Inspiration\n\nAll credit for the design and API should go to\n[`react-toggled`](https://github.com/kentcdodds/react-toggled). If you only need\nto render a toggle component, go with `react-toggled` since it comes with\nfunctions that help with accessibility. If you're handling accessibility by\nyourself or you need to manage multiple on/off states, `react-on-off` is for\nyou.\n\n## Installation\n\n```sh\nnpm install --save react-on-off\n# or\nyarn add react-on-off\n```\n\nYou can also use UMD builds from unpkg:\n\n```html\n\u003cscript src=\"https://unpkg.com/react-on-off/lib/index.umd.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://unpkg.com/react-on-off/lib/index.umd.min.js\"\u003e\u003c/script\u003e\n```\n\n## Components\n\n### `OnOff`\n\nManages a single, independent on/off state. Useful whenever you need to render\nsomething with two states.\n\n#### Usage\n\n```js\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport { OnOff } from \"react-on-off\";\n\nrender(\n  \u003cOnOff\u003e\n    {({ on, toggle }) =\u003e (\n      \u003c\u003e\n        \u003ch1\u003e{on ? \"Red\" : \"Blue\"}\u003c/h1\u003e\n        \u003cbutton onClick={toggle}\u003eSwitch pill\u003c/button\u003e\n      \u003c/\u003e\n    )}\n  \u003c/OnOff\u003e,\n  document.getElementById(\"root\")\n);\n```\n\n#### Props\n\n| Prop                        | Type       | Default | Description                                                                              |\n| --------------------------- | ---------- | ------- | ---------------------------------------------------------------------------------------- |\n| `defaultOn` \u003cbr\u003e _optional_ | `boolean`  | `false` | The initial `on` state.                                                                  |\n| `on` \u003cbr\u003e _optional_        | `boolean`  | –       | Control prop if you want to control the state by yourself.                               |\n| `onChange` \u003cbr\u003e _optional_  | `function` | –       | Called whenever the state changes with the new `on` state.                               |\n| `children` \u003cbr\u003e _required_  | `function` | –       | A render prop. This is where you render whatever you want based on the state of `OnOff`. |\n\n#### Render object\n\n`OnOff` expects the `children` prop to be a function. It is called with a\nsingle argument, an object with the following properties:\n\n| Property | Type       | Description                                                            |\n| -------- | ---------- | ---------------------------------------------------------------------- |\n| `on`     | `boolean`  | `true` if the state is on, `false` otherwise.                          |\n| `off`    | `boolean`  | Convenience property if you need `!on`.                                |\n| `setOn`  | `function` | Sets the state to on.                                                  |\n| `setOff` | `function` | Sets the state to off.                                                 |\n| `toggle` | `function` | Toggles the state (i.e. when it's on, will set to off and vice versa). |\n\n### `OnOffCollection`\n\nManages multiple on/off states where only one state can be on at all times. To\nrender the indivial on/off states, use `OnOffItem` anywhere inside an\n`OnOffCollection` parent.\n\n#### Usage\n\n```js\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport { OnOffCollection, OnOffItem } from \"react-on-off\";\n\nrender(\n  \u003cOnOffCollection defaultOn=\"Home\"\u003e\n    \u003cul\u003e\n      {[\"Home\", \"About\", \"Contact\"].map(stateId =\u003e (\n        \u003cOnOffItem id={stateId} key={stateId}\u003e\n          {({ id, on, setOn }) =\u003e (\n            \u003cli onClick={setOn} className={on ? \"active\" : null}\u003e\n              {id}\n            \u003c/li\u003e\n          )}\n        \u003c/OnOffItem\u003e\n      ))}\n    \u003c/ul\u003e\n  \u003c/OnOffCollection\u003e,\n  document.getElementById(\"root\")\n);\n```\n\n#### Props\n\n| Prop                        | Type       | Default | Description                                                                                                  |\n| --------------------------- | ---------- | ------- | ------------------------------------------------------------------------------------------------------------ |\n| `defaultOn` \u003cbr\u003e _optional_ | `string`   | –       | The item id that should be on initially.                                                                     |\n| `on` \u003cbr\u003e _optional_        | `string`   | –       | Control prop if you want to control which item should be on. Either an id or `null` if no item should be on. |\n| `onChange` \u003cbr\u003e _optional_  | `function` | –       | Called whenever the state changes with the item id that is on.                                               |\n\n### `OnOffItem`\n\nRepresents a single on/off state that is coupled to other on/off states. Doesn't\ndo anything without an `OnOffCollection` parent.\n\n#### Usage\n\nSee [`OnOffCollection` Usage](#usage-1)\n\n#### Props\n\n| Prop                       | Type       | Default     | Description                                                                                                         |\n| -------------------------- | ---------- | ----------- | ------------------------------------------------------------------------------------------------------------------- |\n| `id` \u003cbr\u003e _optional_       | `string`   | a unique id | Only useful in combination with the `defaultOn` or `onChange` prop from `OnOffCollection`. Defaults to a unique id. |\n| `children` \u003cbr\u003e _required_ | `function` | –           | A render prop. This is where you render whatever you want based on the state of the `OnOffItem`.                    |\n\n#### Render object\n\n`OnOffItem` expects the `children` prop to be a function. It is called with a\nsingle argument, an object with the following properties:\n\n| Property | Type       | Description                                                                        |\n| -------- | ---------- | ---------------------------------------------------------------------------------- |\n| `id`     | `string`   | The state id you set yourself or a generated unique id.                            |\n| `on`     | `boolean`  | `true` if the state is on, `false` otherwise.                                      |\n| `off`    | `boolean`  | Convenience property if you need `!on`.                                            |\n| `setOn`  | `function` | Sets the state of the item to on.                                                  |\n| `setOff` | `function` | Sets the state of the item to off.                                                 |\n| `toggle` | `function` | Toggles the state of the item (i.e. when it's on, will set to off and vice versa). |\n\n## Related\n\n* [react-toggled](https://github.com/kentcdodds/react-toggled)\n* [react-powerplug](https://github.com/renatorib/react-powerplug)\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcangoektas%2Freact-on-off","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcangoektas%2Freact-on-off","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcangoektas%2Freact-on-off/lists"}