{"id":26685947,"url":"https://github.com/instructure-react/react-toggle","last_synced_at":"2025-03-26T11:01:15.885Z","repository":{"id":28961137,"uuid":"32487314","full_name":"aaronshaf/react-toggle","owner":"aaronshaf","description":"Elegant, accessible toggle component for React. Also a glorified checkbox.","archived":false,"fork":false,"pushed_at":"2023-07-03T09:39:31.000Z","size":3525,"stargazers_count":950,"open_issues_count":70,"forks_count":158,"subscribers_count":14,"default_branch":"master","last_synced_at":"2025-03-20T16:13:14.514Z","etag":null,"topics":["react","toggle"],"latest_commit_sha":null,"homepage":"http://aaronshaf.github.io/react-toggle/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"TwrpBuilder/twrp-5.1.1-source","license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/aaronshaf.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,"governance":null}},"created_at":"2015-03-18T22:17:58.000Z","updated_at":"2025-03-16T17:19:12.000Z","dependencies_parsed_at":"2023-07-16T22:16:44.478Z","dependency_job_id":null,"html_url":"https://github.com/aaronshaf/react-toggle","commit_stats":{"total_commits":160,"total_committers":40,"mean_commits":4.0,"dds":0.525,"last_synced_commit":"d62964fdfdb359c150e34f79ec2e1706bed31c5e"},"previous_names":["instructure-react/react-toggle"],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aaronshaf%2Freact-toggle","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aaronshaf%2Freact-toggle/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aaronshaf%2Freact-toggle/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aaronshaf%2Freact-toggle/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aaronshaf","download_url":"https://codeload.github.com/aaronshaf/react-toggle/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245641426,"owners_count":20648641,"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":["react","toggle"],"created_at":"2025-03-26T11:01:14.986Z","updated_at":"2025-03-26T11:01:15.873Z","avatar_url":"https://github.com/aaronshaf.png","language":"JavaScript","readme":"An elegant, accessible toggle component for React. Also a glorified checkbox.\n\nSee [usage and examples](http://aaronshaf.github.io/react-toggle/).\n\n## Props\n\nThe component takes the following props.\n\n| Prop              | Type       | Description |\n|-------------------|------------|-------------|\n| `checked`         | _boolean_  | If `true`, the toggle is checked. If `false`, the toggle is unchecked. Use this if you want to treat the toggle as a controlled component |\n| `defaultChecked`  | _boolean_  | If `true` on initial render, the toggle is checked. If `false` on initial render, the toggle is unchecked. Use this if you want to treat the toggle as an uncontrolled component |\n| `onChange`        | _function_ | Callback function to invoke when the user clicks on the toggle. The function signature should be the following: `function(e) { }`. To get the current checked status from the event, use `e.target.checked`. |\n| `onFocus`         | _function_ | Callback function to invoke when field has focus. The function signature should be the following: `function(e) { }` |\n| `onBlur`          | _function_ | Callback function to invoke when field loses focus. The function signature should be the following: `function(e) { }` |\n| `name`            | _string_   | The value of the `name` attribute of the wrapped \\\u003cinput\\\u003e element |\n| `value`           | _string_   | The value of the `value` attribute of the wrapped \\\u003cinput\\\u003e element |\n| `id`              | _string_   | The value of the `id` attribute of the wrapped \\\u003cinput\\\u003e element |\n| `icons`        | _object_  | If `false`, no icons are displayed. You may also pass custom icon components in `icons={{checked: \u003cCheckedIcon /\u003e, unchecked: \u003cUncheckedIcon /\u003e}}` |\n| `aria-labelledby` | _string_   | The value of the `aria-labelledby` attribute of the wrapped \\\u003cinput\\\u003e element |\n| `aria-label`      | _string_   | The value of the `aria-label` attribute of the wrapped \\\u003cinput\\\u003e element |\n| `disabled`        | _boolean_  | If `true`, the toggle is disabled. If `false`, the toggle is enabled |\n\n## Installation\n\n```bash\nnpm install react-toggle\n```\n\n## Usage\n\nIf you want the default styling, include the component's [CSS](./style.css) with\n\n```javascript\nimport \"react-toggle/style.css\" // for ES6 modules\n// or\nrequire(\"react-toggle/style.css\") // for CommonJS\n```\n\n## Development\n\n```javascript\nnpm install\nnpm run dev\n```\n\n## Build\n\n```javascript\nnpm run build\n```\n\n## License\n\nMIT\n","funding_links":[],"categories":["UI Components","Uncategorized","\u003csummary\u003eUI Components\u003c/summary\u003e","Demos"],"sub_categories":["Form Components","Uncategorized"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Finstructure-react%2Freact-toggle","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Finstructure-react%2Freact-toggle","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Finstructure-react%2Freact-toggle/lists"}