Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/gitbrent/bootstrap-switch-button-react
Bootstrap Switch Button for React
https://github.com/gitbrent/bootstrap-switch-button-react
bootstrap bootstrap4 react reactjs switch-button switchbutton typescript
Last synced: about 1 month ago
JSON representation
Bootstrap Switch Button for React
- Host: GitHub
- URL: https://github.com/gitbrent/bootstrap-switch-button-react
- Owner: gitbrent
- License: mit
- Created: 2019-03-28T01:58:43.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2022-12-10T17:07:55.000Z (almost 2 years ago)
- Last Synced: 2024-09-27T16:20:58.844Z (about 2 months ago)
- Topics: bootstrap, bootstrap4, react, reactjs, switch-button, switchbutton, typescript
- Language: CSS
- Homepage: https://gitbrent.github.io/bootstrap-switch-button-react/
- Size: 1.11 MB
- Stars: 20
- Watchers: 1
- Forks: 18
- Open Issues: 60
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://github.com/gitbrent/bootstrap-switch-button-react/blob/master/LICENSE) [](https://david-dm.org/gitbrent/bootstrap-switch-button-react) [](https://snyk.io/test/npm/bootstrap-switch-button-react) [](https://packagequality.com/#?package=bootstrap-switch-button-react) [](https://www.npmjs.com/package/bootstrap-switch-button-react)
# Bootstrap Switch Button for React
Checkbox replacement using stylish bootstrap-4 switch button.
Lightweight (15kb), self-contained, compiled as a single CommonJS file for easy webpack integration.
**************************************************************************************************
#### Library Distributions
Project |Description
-------------------------------------------------------------------------------------------|-------------------------------------------------------
[bootstrap4-toggle](https://github.com/gitbrent/bootstrap4-toggle) | Supports bootstrap4 (requires jQuery)
[bootstrap-switch-button](https://github.com/gitbrent/bootstrap-switch-button) | Supports bootstrap4+ (ES6 class, no dependencies)
[bootstrap-switch-button-react](https://github.com/gitbrent/bootstrap-switch-button-react) | Supports bootstrap4+ (React component, no dependencies)
# Demos
**Demos and API Docs:** https://gitbrent.github.io/bootstrap-switch-button-react/
```typescript
```
# Installation
NPM
```bash
npm i bootstrap-switch-button-react --save
```
Yarn
```bash
yard add bootstrap-switch-button-react
```
# Usage
Keep `state` in sync using the `onChange` function property
```typescript
import BootstrapSwitchButton from 'bootstrap-switch-button-react'
{
this.setState({ isUserAdmin: checked })
}}
/>
```
# Properties
Name |Type |Default |Description |
-----------|------------|----------|----------------------------|
`onlabel` |string/html |"On" |Text of the on switch-button
`offlabel` |string/html |"Off" |Text of the off switch-button
`size` |string | |Size of the switch-button. Possible values are: `xs`, `sm`, `lg` (no size specified means default bootstrap size).
`onstyle` |string |"primary" |Style of the on switch-button. Possible values are: `primary`,`secondary`,`success`,`danger`,`warning`,`info`,`light`,`dark`
`offstyle` |string |"light" |Style of the off switch-button. Possible values are: `primary`,`secondary`,`success`,`danger`,`warning`,`info`,`light`,`dark`
`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.
`width` |integer | |Sets the width of the switch-button. if set to *null*, width will be auto-calculated.
`height` |integer | |Sets the height of the switch-button. if set to *null*, height will be auto-calculated.
# Events
Keep `state` in sync using the `onChange` function property
```typescript
{
this.setState({ isUserAdmin: checked })
}}
/>
```