{"id":15645292,"url":"https://github.com/nettofarah/react-flexible-switch","last_synced_at":"2025-07-05T22:36:32.409Z","repository":{"id":57378603,"uuid":"56277418","full_name":"nettofarah/react-flexible-switch","owner":"nettofarah","description":":on: Easy and Flexible React Switches","archived":false,"fork":false,"pushed_at":"2017-11-22T09:17:13.000Z","size":757,"stargazers_count":55,"open_issues_count":1,"forks_count":14,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-06-18T20:04:04.702Z","etag":null,"topics":["react","react-component","switch","toggle"],"latest_commit_sha":null,"homepage":"http://nettofarah.github.io/react-flexible-switch","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nettofarah.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-04-14T23:59:06.000Z","updated_at":"2025-05-12T14:25:37.000Z","dependencies_parsed_at":"2022-09-26T16:41:36.702Z","dependency_job_id":null,"html_url":"https://github.com/nettofarah/react-flexible-switch","commit_stats":null,"previous_names":[],"tags_count":18,"template":false,"template_full_name":null,"purl":"pkg:github/nettofarah/react-flexible-switch","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nettofarah%2Freact-flexible-switch","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nettofarah%2Freact-flexible-switch/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nettofarah%2Freact-flexible-switch/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nettofarah%2Freact-flexible-switch/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nettofarah","download_url":"https://codeload.github.com/nettofarah/react-flexible-switch/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nettofarah%2Freact-flexible-switch/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261004462,"owners_count":23095710,"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-component","switch","toggle"],"created_at":"2024-10-03T12:05:51.509Z","updated_at":"2025-07-05T22:36:32.345Z","avatar_url":"https://github.com/nettofarah.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Flexible Switch\nEasy and Flexible React switches with support for custom styles.\n\n\n## Demo \u0026 Examples\n\n![switch](https://cloud.githubusercontent.com/assets/270688/14726482/870deed8-07d7-11e6-9c78-be337a1159f0.gif)\n\nLive demo: [http://nettofarah.github.io/react-flexible-switch](http://nettofarah.github.io/react-flexible-switch/)\nTo build the examples locally, run:\n\n```bash\nnpm install\nnpm start\n```\n\nThen open [`localhost:8000`](http://localhost:8000) in a browser.\n\n\n## Installation\n\nThe easiest way to use react-switch is to install it from NPM and include it in your own React build process (using [Browserify](http://browserify.org), [Webpack](http://webpack.github.io/), etc).\n\nYou can also use the standalone build by including `dist/react-switch.js` in your page. If you use this, make sure you have already included React, and it is available as a global variable.\n\n```\nnpm install react-flexible-switch --save\n```\n\n\n## Usage\n\nJust require 'react-flexible-switch' in your app and include it in your components.\n\n```javascript\nconst Switch = require('react-flexible-switch');\n\u003cSwitch /\u003e\n```\n\n### Properties\n\n```javascript\nSwitch.propTypes = {\n  value: React.PropTypes.bool,\n\n  circleStyles: React.PropTypes.shape({\n    onColor: React.PropTypes.string,\n    offColor: React.PropTypes.string,\n    diameter: React.PropTypes.number\n  }),\n\n  labels: React.PropTypes.shape({\n    on: React.PropTypes.string,\n    off: React.PropTypes.string\n  }),\n\n  locked: React.PropTypes.bool,\n\n  onChange: React.PropTypes.func,\n\n  switchStyles: React.PropTypes.shape({\n    width: React.PropTypes.number\n  })\n};\n```\n\n#### value\nAllows you to start a switch either turned on or off.\n\n```javascript\n//On by default\n\u003cSwitch value={true} /\u003e\n\n//Off by default\n\u003cSwitch value={false} /\u003e\n```\n\n#### onChange\nAllows you to pass in callback for when state changes.\nThis will allow you to make the switch a controlled component.\n\n```javascript\nconst onChange = (active) =\u003e {\n  if (active) {\n    console.log('active!')\n  } else {\n    console.log('inactive!')\n  }\n\n  // update your state here\n  this.setState({ value: active })\n}\n\n\u003cSwitch onChange={onChange} /\u003e\n```\n\n#### Custom Styles\nYou can style both the circle and switch styles with any css property, with\nthe addition of `onColor`, `offColor` and `diameter`.\n\n\n```javascript\n// Custom circle colors and size\n\u003cSwitch circleStyles={{ onColor: 'blue', offColor: 'red' }} /\u003e\n\u003cSwitch circleStyles={{ diameter: 55 }} /\u003e\n\u003cSwitch circleStyles={{ diameter: 20 }} /\u003e\n\n// Custom Switch width\n\u003cSwitch switchStyles={{ width: 50 }} /\u003e\n\u003cSwitch switchStyles={{ width: 200 }} /\u003e\n```\n\n#### Customzing with CSS classes\nYou can also style the components using the following css classes:\n\n- `react-flexible-switch`: the main component\n- `react-flexible-switch--active`: the main component, when active\n- `react-flexible-switch--inactive`: the main component, when inactive\n- `react-flexible-switch--sliding`: the main component, during the transition\n- `react-flexible-switch-label`: the label component\n- `react-flexible-switch-circle`: the circle component\n\n#### Labels\nLabels for the `on` and `off` states can be set by using the `labels` property.\n\n```javascript\n\u003cSwitch labels={{ on: 'Turned On', off: 'Turned Off' }} /\u003e\n\u003cSwitch labels={{ on: 'On', off: 'Off' }} /\u003e\n```\n\n#### Blocking User Interaction\nIn case you need to lock the switch and block user interaction for some reason.\n\n```javascript\n\u003cSwitch locked /\u003e\n\u003cSwitch active locked /\u003e\n```\n\n## Development (`src`, `lib` and the build process)\n\n**NOTE:** The source code for the component is in `src`. A transpiled CommonJS version (generated with Babel) is available in `lib` for use with node.js, browserify and webpack. A UMD bundle is also built to `dist`, which can be included without the need for any build system.\n\nTo build, watch and serve the examples (which will also watch the component source), run `npm start`. If you just want to watch changes to `src` and rebuild `lib`, run `npm run watch` (this is useful if you are working with `npm link`).\n\n## License\nThe module is available as open source under the terms of the MIT License.\nCopyright (c) 2016 Netto Farah.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnettofarah%2Freact-flexible-switch","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnettofarah%2Freact-flexible-switch","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnettofarah%2Freact-flexible-switch/lists"}