{"id":14972519,"url":"https://github.com/gitbrent/bootstrap-switch-button-react","last_synced_at":"2025-06-23T15:32:55.677Z","repository":{"id":34370975,"uuid":"178106387","full_name":"gitbrent/bootstrap-switch-button-react","owner":"gitbrent","description":"Bootstrap Switch Button for React","archived":false,"fork":false,"pushed_at":"2022-12-10T17:07:55.000Z","size":1166,"stargazers_count":20,"open_issues_count":60,"forks_count":18,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-05-20T04:19:05.548Z","etag":null,"topics":["bootstrap","bootstrap4","react","reactjs","switch-button","switchbutton","typescript"],"latest_commit_sha":null,"homepage":"https://gitbrent.github.io/bootstrap-switch-button-react/","language":"CSS","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/gitbrent.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-03-28T01:58:43.000Z","updated_at":"2023-09-01T11:42:15.000Z","dependencies_parsed_at":"2023-01-15T06:38:32.014Z","dependency_job_id":null,"html_url":"https://github.com/gitbrent/bootstrap-switch-button-react","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/gitbrent/bootstrap-switch-button-react","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gitbrent%2Fbootstrap-switch-button-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gitbrent%2Fbootstrap-switch-button-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gitbrent%2Fbootstrap-switch-button-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gitbrent%2Fbootstrap-switch-button-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gitbrent","download_url":"https://codeload.github.com/gitbrent/bootstrap-switch-button-react/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gitbrent%2Fbootstrap-switch-button-react/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261264348,"owners_count":23132566,"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":["bootstrap","bootstrap4","react","reactjs","switch-button","switchbutton","typescript"],"created_at":"2024-09-24T13:47:02.697Z","updated_at":"2025-06-23T15:32:55.653Z","avatar_url":"https://github.com/gitbrent.png","language":"CSS","readme":"[![MIT License](https://img.shields.io/github/license/gitbrent/bootstrap-switch-button-react.svg)](https://github.com/gitbrent/bootstrap-switch-button-react/blob/master/LICENSE)  [![Dependency Status](https://david-dm.org/gitbrent/bootstrap-switch-button-react/status.svg)](https://david-dm.org/gitbrent/bootstrap-switch-button-react)  [![Known Vulnerabilities](https://snyk.io/test/npm/bootstrap-switch-button-react/badge.svg)](https://snyk.io/test/npm/bootstrap-switch-button-react)  [![Package Quality](https://npm.packagequality.com/shield/bootstrap-switch-button-react.svg)](https://packagequality.com/#?package=bootstrap-switch-button-react)  [![npm downloads](https://img.shields.io/npm/dm/bootstrap-switch-button-react.svg)](https://www.npmjs.com/package/bootstrap-switch-button-react)\n\n# Bootstrap Switch Button for React\n\nCheckbox replacement using stylish bootstrap-4 switch button.\n\nLightweight (15kb), self-contained, compiled as a single CommonJS file for easy webpack integration.\n\n**************************************************************************************************\n\n#### Library Distributions\nProject                                                                                    |Description\n-------------------------------------------------------------------------------------------|-------------------------------------------------------\n[bootstrap4-toggle](https://github.com/gitbrent/bootstrap4-toggle)                         | Supports bootstrap4 (requires jQuery)\n[bootstrap-switch-button](https://github.com/gitbrent/bootstrap-switch-button)             | Supports bootstrap4+ (ES6 class, no dependencies)\n[bootstrap-switch-button-react](https://github.com/gitbrent/bootstrap-switch-button-react) | Supports bootstrap4+ (React component, no dependencies)\n\n# Demos\n**Demos and API Docs:** https://gitbrent.github.io/bootstrap-switch-button-react/  \n\n```typescript\n\u003cBootstrapSwitchButton onlabel='Admin User' offlabel='Regular User' checked={false}/\u003e\n```\n\n![Demo GIF](https://github.com/gitbrent/bootstrap-switch-button-react/blob/master/img/demo.gif?raw=true)\n\n\n# Installation\nNPM\n```bash\nnpm i bootstrap-switch-button-react --save\n```\nYarn\n```bash\nyard add bootstrap-switch-button-react\n```\n\n# Usage\nKeep `state` in sync using the `onChange` function property\n\n```typescript\nimport BootstrapSwitchButton from 'bootstrap-switch-button-react'\n\n\u003cBootstrapSwitchButton\n    checked={false}\n    onlabel='Admin User'\n    onstyle='danger'\n    offlabel='Regular User'\n    offstyle='success'\n    style='w-100 mx-3'\n    onChange={(checked: boolean) =\u003e {\n        this.setState({ isUserAdmin: checked })\n    }}\n/\u003e\n```\n\n\n# Properties\nName       |Type        |Default   |Description                 |\n-----------|------------|----------|----------------------------|\n`onlabel`  |string/html |\"On\"      |Text of the on switch-button\n`offlabel` |string/html |\"Off\"     |Text of the off switch-button\n`size`     |string      |          |Size of the switch-button. Possible values are: `xs`, `sm`, `lg` (no size specified means default bootstrap size).\n`onstyle`  |string      |\"primary\" |Style of the on switch-button. Possible values are: `primary`,`secondary`,`success`,`danger`,`warning`,`info`,`light`,`dark`\n`offstyle` |string      |\"light\"   |Style of the off switch-button. Possible values are: `primary`,`secondary`,`success`,`danger`,`warning`,`info`,`light`,`dark`\n`style`    |string      |          |Appends the value to the class attribute of the switch-button. This can be used to apply custom styles. Refer to Custom Styles for reference.\n`width`    |integer     |     |Sets the width of the switch-button. if set to *null*, width will be auto-calculated.\n`height`   |integer     |     |Sets the height of the switch-button. if set to *null*, height will be auto-calculated.\n\n\n# Events\nKeep `state` in sync using the `onChange` function property\n\n```typescript\n\u003cBootstrapSwitchButton\n    onChange={(checked: boolean) =\u003e {\n        this.setState({ isUserAdmin: checked })\n    }}\n/\u003e\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgitbrent%2Fbootstrap-switch-button-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgitbrent%2Fbootstrap-switch-button-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgitbrent%2Fbootstrap-switch-button-react/lists"}