{"id":20972250,"url":"https://github.com/subramanyaks/reactjs-toggleswitch","last_synced_at":"2026-02-25T12:37:56.941Z","repository":{"id":223827662,"uuid":"761630371","full_name":"SubramanyaKS/reactjs-toggleswitch","owner":"SubramanyaKS","description":"A simple toggle switch component library for react js application","archived":false,"fork":false,"pushed_at":"2024-11-16T10:40:07.000Z","size":227,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-05-06T04:47:22.813Z","etag":null,"topics":["react","react-toggle","reactjs","reactjs-library","toggle","toggle-button","toggle-buttons","toggle-switch","toggle-switches"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/reactjs-toggleswitch","language":"TypeScript","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/SubramanyaKS.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,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-02-22T07:32:03.000Z","updated_at":"2024-11-16T10:40:10.000Z","dependencies_parsed_at":"2024-10-24T15:26:48.148Z","dependency_job_id":"6a5b103f-5419-4417-9e8b-c89541aed4fc","html_url":"https://github.com/SubramanyaKS/reactjs-toggleswitch","commit_stats":{"total_commits":85,"total_committers":2,"mean_commits":42.5,"dds":0.04705882352941182,"last_synced_commit":"c8f22e054eb7c267f3e17412952309c8e3b6c8a3"},"previous_names":["subramanyaks/reactjs-toggleswitch"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SubramanyaKS%2Freactjs-toggleswitch","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SubramanyaKS%2Freactjs-toggleswitch/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SubramanyaKS%2Freactjs-toggleswitch/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SubramanyaKS%2Freactjs-toggleswitch/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SubramanyaKS","download_url":"https://codeload.github.com/SubramanyaKS/reactjs-toggleswitch/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254131973,"owners_count":22020057,"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","react-toggle","reactjs","reactjs-library","toggle","toggle-button","toggle-buttons","toggle-switch","toggle-switches"],"created_at":"2024-11-19T04:07:00.736Z","updated_at":"2026-02-25T12:37:56.899Z","avatar_url":"https://github.com/SubramanyaKS.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React JS Toggle Switch\n\n\u003c!-- \n![NPM Version](https://img.shields.io/npm/v/reactjs-toggleswitch) --\u003e\n\n`reactjs-toggleswitch` is a customizable toggle switch component implemented using react js and TypeScript for React applications. It provides a simple and intuitive way to implement toggle functionality with customizable styles and behavior.\n\n![image](https://github.com/user-attachments/assets/4c2f0913-fcc4-4e14-b8ad-2e1a2dd76240)\n![image](https://github.com/user-attachments/assets/6b16f1b8-21b2-4fd0-b71c-85b24079251b)\n\n\n## Installation\n\nyou can install this package using below npm command\n\n```sh\nnpm install reactjs-toggleswitch\n```\nor\n\n```sh\nyarn add reactjs-toggleswitch\n```\n\n## Usage\n\nImport the ToggleSwitch component in your React code and use it as follows:\n\n```js\n\nimport React, { useState } from 'react';\nimport {ToggleSwitch} from 'reactjs-toggleswitch';\n\nconst MyComponent: React.FC = () =\u003e {\n  const [isChecked, setIsChecked] = useState\u003cboolean\u003e(false);\n\n  const handleChange = (checked: boolean) =\u003e {\n    setIsChecked(checked);\n  };\n\n  return (\n    \u003cdiv\u003e\n      \u003ch2\u003eToggle Default Switch Example\u003c/h2\u003e\n      \u003cToggleSwitch checked={isChecked} onToggle={handleChange} /\u003e\n    \u003c/div\u003e\n  );\n};\n\n\n```\nFor more details regarding usage please refer [EXAMPLES.md](https://github.com/SubramanyaKS/reactjs-toggleswitch/blob/main/EXAMPLES.md)\n\n\n**Note**: If styles are not working in your system after installation please import the below style.\n\n```js\nimport 'reactjs-toggleswitch/dist/cjs/index.css';\n\n```\n\n### Options\n\nThe `ToggleSwitch` component accepts the following props:\n\n| Option | type | Description |\n| :---: | :---: | :---: |\n| `onToggle` | `function` | Callback function called when the switch state changes/toggle. Receives a boolean parameter indicating the new state. |\n| `checked` | `boolean` | Specifies whether the switch is checked or not. |\n| `onColor` | `string` | specifies background color change when switch is checked |\n| `offColor` | `string` | specifies background color change when switch is unchecked |\n| `disable` | `boolean` | specifies for disabling/enabling the toggle. |\n| `ariaLabel` | `string`| used to provide a label or description for an element. |\n|`children` |`component` | specifies thumb icon use any component like font-awesome |\n| `id` | `string`| The value represents the id attribute of the encapsulated `input` element. |\n| `name` | `string`| The value represents the name attribute of the encapsulated `input` element.|\n| `value` | `string`| The value represents the value attribute of the encapsulated `input` element.|\n|`width`|`string`|The value represents width of toggle switch|\n|`thumbOnColor`|`string`|specifies background color of thumb change when switch is checked|\n|`thumbOffColor`|`string`|specifies background color of thumb change when switch is unchecked|\n\n\nThe Live usage of Reactjs-toggleswitch can be seen [here](https://subramanyaks.github.io/Weather-app/)\n\n## Contribution\n\nWe welcome contributions! If you'd like to contribute to reactjs-toggleswitch, please follow our [Contribution Guidelines](https://github.com/SubramanyaKS/reactjs-toggleswitch/blob/main/CONTRIBUTING.md).\n\n## Author\n[Subramanya KS](https://github.com/SubramanyaKS)\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE](./LICENSE) file for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsubramanyaks%2Freactjs-toggleswitch","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsubramanyaks%2Freactjs-toggleswitch","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsubramanyaks%2Freactjs-toggleswitch/lists"}