{"id":13452152,"url":"https://github.com/kentcdodds/react-toggled","last_synced_at":"2025-03-23T19:33:43.245Z","repository":{"id":56073533,"uuid":"102029612","full_name":"kentcdodds/react-toggled","owner":"kentcdodds","description":"Component to build simple, flexible, and accessible toggle components","archived":true,"fork":false,"pushed_at":"2020-11-27T03:35:30.000Z","size":314,"stargazers_count":453,"open_issues_count":4,"forks_count":39,"subscribers_count":12,"default_branch":"master","last_synced_at":"2024-05-20T08:35:00.871Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://codesandbox.io/s/m38674w9vy","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/kentcdodds.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-08-31T18:01:12.000Z","updated_at":"2024-05-01T00:07:52.000Z","dependencies_parsed_at":"2022-08-15T12:40:29.572Z","dependency_job_id":null,"html_url":"https://github.com/kentcdodds/react-toggled","commit_stats":null,"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kentcdodds%2Freact-toggled","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kentcdodds%2Freact-toggled/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kentcdodds%2Freact-toggled/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kentcdodds%2Freact-toggled/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kentcdodds","download_url":"https://codeload.github.com/kentcdodds/react-toggled/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244752352,"owners_count":20504255,"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":[],"created_at":"2024-07-31T07:01:15.010Z","updated_at":"2025-03-23T19:33:42.828Z","avatar_url":"https://github.com/kentcdodds.png","language":"JavaScript","funding_links":[],"categories":["Components","JavaScript","Uncategorized","Libraries","React"],"sub_categories":["Inputs","Uncategorized","React Components"],"readme":"\u003ch1 align=\"center\"\u003e\n  react-toggled ⚛️\n  \u003cbr\u003e\n  \u003cimg src=\"https://cdn.rawgit.com/kentcdodds/react-toggled/master/other/logo/react-toggled.png\" alt=\"react-toggled logo\" title=\"react-toggled logo\" width=\"300\"\u003e\n  \u003cbr\u003e\n\u003c/h1\u003e\n\u003cp align=\"center\" style=\"font-size: 1.2rem;\"\u003eComponent to build simple, flexible, and accessible toggle components\u003c/p\u003e\n\n\u003chr /\u003e\n\n[![Build Status][build-badge]][build]\n[![Code Coverage][coverage-badge]][coverage]\n[![downloads][downloads-badge]][npmcharts]\n[![version][version-badge]][package]\n[![MIT License][license-badge]][license]\n\n[![All Contributors](https://img.shields.io/badge/all_contributors-6-orange.svg?style=flat-square)](#contributors)\n[![PRs Welcome][prs-badge]][prs]\n[![Chat][chat-badge]][chat]\n[![Code of Conduct][coc-badge]][coc]\n\n[![Supports React and Preact][react-badge]][react]\n[![size][size-badge]][unpkg-dist]\n[![gzip size][gzip-badge]][unpkg-dist]\n[![module formats: umd, cjs, and es][module-formats-badge]][unpkg-dist]\n\n[![Watch on GitHub][github-watch-badge]][github-watch]\n[![Star on GitHub][github-star-badge]][github-star]\n[![Tweet][twitter-badge]][twitter]\n\n## The problem\n\nYou want a toggle component that's simple and gives you complete control over\nrendering and state.\n\n## This solution\n\nThis follows the patterns in [`downshift`][downshift] to expose an API that\nrenders nothing and simply encapsulates the logic of a toggle component.\n\n## Table of Contents\n\n\u003c!-- START doctoc generated TOC please keep comment here to allow auto update --\u003e\n\n\u003c!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --\u003e\n\n* [Installation](#installation)\n* [Usage](#usage)\n* [Props:](#props)\n  * [defaultOn](#defaulton)\n  * [onToggle](#ontoggle)\n  * [on](#on)\n  * [children](#children)\n* [Examples](#examples)\n* [Inspiration](#inspiration)\n* [Other Solutions](#other-solutions)\n* [Contributors](#contributors)\n* [LICENSE](#license)\n\n\u003c!-- END doctoc generated TOC please keep comment here to allow auto update --\u003e\n\n## Installation\n\nThis module is distributed via [npm][npm] which is bundled with [node][node] and\nshould be installed as one of your project's `dependencies`:\n\n```\nnpm install --save react-toggled\n```\n\n\u003e This package also depends on `react` and `prop-types`. Please make sure you\n\u003e have those installed as well.\n\n\u003e Note also this library supports `preact` out of the box. If you are using\n\u003e `preact` then look in the `preact/` folder and use the module you want.\n\u003e You should be able to simply do: `import Toggle from 'react-toggled/preact'`\n\n## Usage\n\n```jsx\nimport React from 'react'\nimport {render} from 'react-dom'\nimport Toggle from 'react-toggled'\n\nrender(\n  \u003cToggle\u003e\n    {({on, getTogglerProps}) =\u003e (\n      \u003cdiv\u003e\n        \u003cbutton {...getTogglerProps()}\u003eToggle me\u003c/button\u003e\n        \u003cdiv\u003e{on ? 'Toggled On' : 'Toggled Off'}\u003c/div\u003e\n      \u003c/div\u003e\n    )}\n  \u003c/Toggle\u003e,\n  document.getElementById('root'),\n)\n```\n\n`react-toggled` is the only component. It doesn't render anything itself, it just\ncalls the child function and renders that. Wrap everything in\n`\u003cToggle\u003e{/* your function here! */}\u003c/Toggle\u003e`.\n\n## Props:\n\n### defaultOn\n\n\u003e `boolean` | defaults to `false`\n\nThe initial `on` state.\n\n### onToggle\n\n\u003e `function(on: boolean, object: TogglerStateAndHelpers)` | optional, no useful default\n\nCalled when the toggler is clicked.\n\n* `on`: The new on state\n* `TogglerStateAndHelpers`: the exact same thing you get in your child render\n  prop function.\n\n### on\n\n\u003e `boolean` | **control prop**\n\nreact-toggled manages its own state internally and calls your `onToggle`\nhandler whenever the `on` state changes. Your child render prop function\n(read more below) can be used to manipulate this state from within the render\nfunction and can likely support many of your use cases.\n\nHowever, if more control is needed, you can pass the `on` state as a prop\nand that state becomes controlled. As soon as\n`this.props.on !== undefined`, internally, `react-toggled` will determine\nits state based on your prop's value rather than its own internal state. You\nwill be required to keep the state up to date (this is where `onToggle` comes in\nreally handy), but you can also control the state from anywhere, be\nthat state from other components, `redux`, `react-router`, or anywhere else.\n\n\u003e Note: This is very similar to how normal controlled components work elsewhere\n\u003e in react (like `\u003cinput /\u003e`). If you want to learn more about this concept, you\n\u003e can learn about that from this the\n\u003e [\"Controlled Components\" lecture][controlled-components-lecture] and\n\u003e exercises from [React Training's][react-training] \u003e [Advanced React][advanced-react] course.\n\n### children\n\n\u003e `function({})` | _required_\n\nThis is called with an object.\n\nThis is where you render whatever you want to based on the state of `react-toggled`.\nThe function is passed as the child prop:\n`\u003cToggle\u003e{/* right here*/}\u003c/Toggle\u003e`\n\n\u003c!-- This table was generated via http://www.tablesgenerator.com/markdown_tables --\u003e\n\n| property                 | category    | type                      | description                                                                                                                                                    |\n| ------------------------ | ----------- | ------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `on`                     | state       | `boolean`                 | The current `on` state of toggle                                                                                                                               |\n| `getTogglerProps`        | prop getter | `function(props: object)` | returns the props you should apply to the button element you render. Includes `aria-` attributes                                                               |\n| `getInputTogglerProps`   | prop getter | `function(props: object)` | returns the props you should apply to the input (checkbox) element you render. Includes `aria-` attributes                                                     |\n| `getElementTogglerProps` | prop getter | `function(props: object)` | returns the props you should apply to the element you render. Use this if you are not using a button or input—for example, a span. Includes `aria-` attributes |\n| `setOn`                  | action      | `function()`              | Sets the `on` state to `true`                                                                                                                                  |\n| `setOff`                 | action      | `function()`              | Sets the `on` state to `false`                                                                                                                                 |\n| `toggle`                 | action      | `function()`              | Toggles the `on` state (i.e. if it's currently `true`, will set to `false`)                                                                                    |\n\n## Examples\n\nExamples exist on [codesandbox.io][examples]:\n\n* [Bare bones toggle](https://codesandbox.io/s/m38674w9vy)\n\nIf you would like to add an example, follow these steps:\n\n1. Fork [this codesandbox](https://codesandbox.io/s/m38674w9vy)\n2. Make sure your version (under dependencies) is the latest available version.\n3. Update the title and description\n4. Update the code for your example (add some form of documentation to explain what it is)\n5. Add the tag: `react-toggled:example`\n\nYou'll find other examples in the `stories/examples` folder of the repo.\nAnd you'll find\n[a live version of those examples here](https://react-toggled.netlify.com)\n\n## Inspiration\n\nI built this while building [an example of using `glamorous` with `next.js`][glamorous-with-next]\n\n## Other Solutions\n\nYou can implement any of the other solutions using `react-toggled`, but if\nyou'd prefer to use these out of the box solutions, then that's fine too. There\nare tons of them, so just\n[checkout npm](https://www.npmjs.com/search?q=react%20toggle).\n\n## Contributors\n\nThanks goes to these people ([emoji key][emojis]):\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore --\u003e\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://kentcdodds.com\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/1500684?v=3\" width=\"100px;\" alt=\"Kent C. Dodds\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eKent C. Dodds\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/kentcdodds/react-toggled/commits?author=kentcdodds\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"https://github.com/kentcdodds/react-toggled/commits?author=kentcdodds\" title=\"Documentation\"\u003e📖\u003c/a\u003e \u003ca href=\"#infra-kentcdodds\" title=\"Infrastructure (Hosting, Build-Tools, etc)\"\u003e🚇\u003c/a\u003e \u003ca href=\"https://github.com/kentcdodds/react-toggled/commits?author=kentcdodds\" title=\"Tests\"\u003e⚠️\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/tansongyang\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/9488719?v=4\" width=\"100px;\" alt=\"Frank Tan\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eFrank Tan\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/kentcdodds/react-toggled/commits?author=tansongyang\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"https://github.com/kentcdodds/react-toggled/commits?author=tansongyang\" title=\"Documentation\"\u003e📖\u003c/a\u003e \u003ca href=\"https://github.com/kentcdodds/react-toggled/commits?author=tansongyang\" title=\"Tests\"\u003e⚠️\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"http://www.oliverjam.es\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/9408641?v=4\" width=\"100px;\" alt=\"Oliver\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eOliver\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/kentcdodds/react-toggled/commits?author=oliverjam\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"http://www.thefullresolution.com/\"\u003e\u003cimg src=\"https://avatars2.githubusercontent.com/u/11708648?v=4\" width=\"100px;\" alt=\"Jedrzej Lewandowski\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eJedrzej Lewandowski\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/kentcdodds/react-toggled/commits?author=TheFullResolution\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/bslinger\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/603386?v=4\" width=\"100px;\" alt=\"Ben Slinger\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eBen Slinger\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/kentcdodds/react-toggled/commits?author=bslinger\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"https://github.com/kentcdodds/react-toggled/commits?author=bslinger\" title=\"Tests\"\u003e⚠️\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://stackshare.io/jdorfman/decisions\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/398230?v=4\" width=\"100px;\" alt=\"Justin Dorfman\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eJustin Dorfman\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"#fundingFinding-jdorfman\" title=\"Funding Finding\"\u003e🔍\u003c/a\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\nThis project follows the [all-contributors][all-contributors] specification.\nContributions of any kind welcome!\n\n## LICENSE\n\nMIT\n\n[npm]: https://www.npmjs.com/\n[node]: https://nodejs.org\n[build-badge]: https://img.shields.io/travis/kentcdodds/react-toggled.svg?style=flat-square\n[build]: https://travis-ci.org/kentcdodds/react-toggled\n[coverage-badge]: https://img.shields.io/codecov/c/github/kentcdodds/react-toggled.svg?style=flat-square\n[coverage]: https://codecov.io/github/kentcdodds/react-toggled\n[version-badge]: https://img.shields.io/npm/v/react-toggled.svg?style=flat-square\n[package]: https://www.npmjs.com/package/react-toggled\n[downloads-badge]: https://img.shields.io/npm/dm/react-toggled.svg?style=flat-square\n[npmcharts]: http://npmcharts.com/compare/react-toggled\n[license-badge]: https://img.shields.io/npm/l/react-toggled.svg?style=flat-square\n[license]: https://github.com/kentcdodds/react-toggled/blob/master/LICENSE\n[prs-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square\n[prs]: http://makeapullrequest.com\n[chat]: https://gitter.im/kentcdodds/react-toggled\n[chat-badge]: https://img.shields.io/gitter/room/kentcdodds/react-toggled.svg?style=flat-square\n[coc-badge]: https://img.shields.io/badge/code%20of-conduct-ff69b4.svg?style=flat-square\n[coc]: https://github.com/kentcdodds/react-toggled/blob/master/other/CODE_OF_CONDUCT.md\n[react-badge]: https://img.shields.io/badge/%E2%9A%9B%EF%B8%8F-(p)react-00d8ff.svg?style=flat-square\n[react]: https://facebook.github.io/react/\n[gzip-badge]: http://img.badgesize.io/https://unpkg.com/react-toggled/dist/react-toggled.umd.min.js?compression=gzip\u0026label=gzip%20size\u0026style=flat-square\n[size-badge]: http://img.badgesize.io/https://unpkg.com/react-toggled/dist/react-toggled.umd.min.js?label=size\u0026style=flat-square\n[unpkg-dist]: https://unpkg.com/react-toggled/dist/\n[module-formats-badge]: https://img.shields.io/badge/module%20formats-umd%2C%20cjs%2C%20es-green.svg?style=flat-square\n[github-watch-badge]: https://img.shields.io/github/watchers/kentcdodds/react-toggled.svg?style=social\n[github-watch]: https://github.com/kentcdodds/react-toggled/watchers\n[github-star-badge]: https://img.shields.io/github/stars/kentcdodds/react-toggled.svg?style=social\n[github-star]: https://github.com/kentcdodds/react-toggled/stargazers\n[twitter]: https://twitter.com/intent/tweet?text=Check%20out%20react-toggled%20by%20%40kentcdodds%20https%3A%2F%2Fgithub.com%2Fkentcdodds%2Freact-toggled%20%F0%9F%91%8D\n[twitter-badge]: https://img.shields.io/twitter/url/https/github.com/kentcdodds/react-toggled.svg?style=social\n[emojis]: https://github.com/kentcdodds/all-contributors#emoji-key\n[all-contributors]: https://github.com/kentcdodds/all-contributors\n[ryan]: https://github.com/ryanflorence\n[compound-components-lecture]: https://courses.reacttraining.com/courses/advanced-react/lectures/3060560\n[examples]: https://codesandbox.io/search?refinementList%5Btags%5D%5B0%5D=react-toggled%3Aexample\u0026page=1\n[controlled-components-lecture]: https://courses.reacttraining.com/courses/advanced-react/lectures/3172720\n[react-training]: https://reacttraining.com/\n[advanced-react]: https://courses.reacttraining.com/courses/enrolled/200086\n[fac]: https://medium.com/merrickchristensen/function-as-child-components-5f3920a9ace9\n[glamorous-with-next]: https://github.com/kentcdodds/glamorous-with-next\n[downshift]: https://github.com/paypal/downshift\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkentcdodds%2Freact-toggled","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkentcdodds%2Freact-toggled","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkentcdodds%2Freact-toggled/lists"}