├── .gitignore ├── CHANGELOG.md ├── LICENSE ├── README.md ├── docs ├── package-lock.json ├── package.json ├── public │ ├── build │ │ └── main.78239c5431205ae8c996.js │ └── index.html ├── src │ ├── index.html │ ├── index.tsx │ ├── test.html │ └── test.tsx ├── test-height │ ├── build │ │ └── main.4e39926b8d2c24c91818.js │ └── index.html ├── tsconfig.json └── webpack.config.js ├── img └── demo.gif ├── lib ├── bootstrap-switch-button-react.d.ts └── bootstrap-switch-button-react.js ├── package-lock.json ├── package.json ├── src ├── .prettierrc.json ├── bootstrap-switch-button-react.js └── style.css ├── tsconfig.json └── webpack.config.js /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Runtime data 9 | pids 10 | *.pid 11 | *.seed 12 | *.pid.lock 13 | 14 | # Directory for instrumented libs generated by jscoverage/JSCover 15 | lib-cov 16 | 17 | # Coverage directory used by tools like istanbul 18 | coverage 19 | 20 | # nyc test coverage 21 | .nyc_output 22 | 23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 24 | .grunt 25 | 26 | # Bower dependency directory (https://bower.io/) 27 | bower_components 28 | 29 | # node-waf configuration 30 | .lock-wscript 31 | 32 | # Compiled binary addons (https://nodejs.org/api/addons.html) 33 | build/Release 34 | 35 | # Dependency directories 36 | node_modules/ 37 | jspm_packages/ 38 | 39 | # TypeScript v1 declaration files 40 | typings/ 41 | 42 | # Optional npm cache directory 43 | .npm 44 | 45 | # Optional eslint cache 46 | .eslintcache 47 | 48 | # Optional REPL history 49 | .node_repl_history 50 | 51 | # Output of 'npm pack' 52 | *.tgz 53 | 54 | # Yarn Integrity file 55 | .yarn-integrity 56 | 57 | # dotenv environment variables file 58 | .env 59 | 60 | # next.js build output 61 | .next 62 | 63 | # macOS 64 | .DS_Store 65 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | All notable changes to this project will be documented in this file. 3 | 4 | The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), 5 | and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). 6 | 7 | ## [1.2.0] - 2019-12-05 8 | ### Added 9 | - Added `componentDidUpdate` to fix update on props change [\#6](https://github.com/gitbrent/bootstrap-switch-button-react/pull/6) ([GustavoDinizMonteiro](https://github.com/GustavoDinizMonteiro)) 10 | - Added missing methods to typescript defs [\#11](https://github.com/gitbrent/bootstrap-switch-button-react/issue/11) ([evark](https://github.com/evark)) 11 | ### Changed 12 | - Replaced inner `label` tags with `span` for accessibility 13 | - Updated demo to bootstrap 4.4.1 14 | 15 | ## [1.1.0] - 2019-07-29 16 | ### Added 17 | - Added new typescript defs (`bootstrap-switch-button-react.d.ts`) 18 | ### Changed 19 | - Fixed dependencies in `package.json` 20 | 21 | ## [1.0.0] - 2019-04-03 22 | ### Added 23 | - New demo/api page (test folder) and a new height-test page 24 | - New project homepage/docs (`gh-pages`) 25 | - Added changelog 26 | ### Changed 27 | - Fixed issue with component height not matching bootstrap components 28 | - Added "keywords" and "bugs" to `package.json` 29 | 30 | ## [1.0.0-beta.10] - 2019-03-29 31 | - Fix for touch event bug 32 | 33 | ## [1.0.0-beta.9] - 2019-03-29 34 | - 2 bug fixes 35 | 36 | ## [1.0.0-beta.8] - 2019-03-28 37 | - onChange breaking bug fix 38 | 39 | ## [1.0.0-beta.7] - 2019-03-28 40 | - Compiled from src to lib now as commonjs 41 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Brent Ely 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | [![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) 2 | 3 | # Bootstrap Switch Button for React 4 | 5 | Checkbox replacement using stylish bootstrap-4 switch button. 6 | 7 | Lightweight (15kb), self-contained, compiled as a single CommonJS file for easy webpack integration. 8 | 9 | ************************************************************************************************** 10 | 11 | #### Library Distributions 12 | Project |Description 13 | -------------------------------------------------------------------------------------------|------------------------------------------------------- 14 | [bootstrap4-toggle](https://github.com/gitbrent/bootstrap4-toggle) | Supports bootstrap4 (requires jQuery) 15 | [bootstrap-switch-button](https://github.com/gitbrent/bootstrap-switch-button) | Supports bootstrap4+ (ES6 class, no dependencies) 16 | [bootstrap-switch-button-react](https://github.com/gitbrent/bootstrap-switch-button-react) | Supports bootstrap4+ (React component, no dependencies) 17 | 18 | # Demos 19 | **Demos and API Docs:** https://gitbrent.github.io/bootstrap-switch-button-react/ 20 | 21 | ```typescript 22 | 23 | ``` 24 | 25 | ![Demo GIF](https://github.com/gitbrent/bootstrap-switch-button-react/blob/master/img/demo.gif?raw=true) 26 | 27 | 28 | # Installation 29 | NPM 30 | ```bash 31 | npm i bootstrap-switch-button-react --save 32 | ``` 33 | Yarn 34 | ```bash 35 | yard add bootstrap-switch-button-react 36 | ``` 37 | 38 | # Usage 39 | Keep `state` in sync using the `onChange` function property 40 | 41 | ```typescript 42 | import BootstrapSwitchButton from 'bootstrap-switch-button-react' 43 | 44 | { 52 | this.setState({ isUserAdmin: checked }) 53 | }} 54 | /> 55 | ``` 56 | 57 | 58 | # Properties 59 | Name |Type |Default |Description | 60 | -----------|------------|----------|----------------------------| 61 | `onlabel` |string/html |"On" |Text of the on switch-button 62 | `offlabel` |string/html |"Off" |Text of the off switch-button 63 | `size` |string | |Size of the switch-button. Possible values are: `xs`, `sm`, `lg` (no size specified means default bootstrap size). 64 | `onstyle` |string |"primary" |Style of the on switch-button. Possible values are: `primary`,`secondary`,`success`,`danger`,`warning`,`info`,`light`,`dark` 65 | `offstyle` |string |"light" |Style of the off switch-button. Possible values are: `primary`,`secondary`,`success`,`danger`,`warning`,`info`,`light`,`dark` 66 | `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. 67 | `width` |integer | |Sets the width of the switch-button. if set to *null*, width will be auto-calculated. 68 | `height` |integer | |Sets the height of the switch-button. if set to *null*, height will be auto-calculated. 69 | 70 | 71 | # Events 72 | Keep `state` in sync using the `onChange` function property 73 | 74 | ```typescript 75 | { 77 | this.setState({ isUserAdmin: checked }) 78 | }} 79 | /> 80 | ``` 81 | -------------------------------------------------------------------------------- /docs/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "bootstrap-switch-button-react-test", 3 | "version": "1.3.0", 4 | "license": "MIT", 5 | "repository": { 6 | "type": "git", 7 | "url": "https://github.com/gitbrent/bootstrap-switch-button-react.git" 8 | }, 9 | "peerDependencies": { 10 | "react": "^16.4.0" 11 | }, 12 | "scripts": { 13 | "start": "webpack-dev-server -d --content-base ./public", 14 | "watch": "webpack --watch", 15 | "build": "webpack -p" 16 | }, 17 | "dependencies": { 18 | "@babel/core": "^7.8.4", 19 | "@babel/preset-env": "^7.8.4", 20 | "@babel/preset-react": "^7.8.3", 21 | "css-loader": "^3.4.2", 22 | "react": "^16.12.0", 23 | "style-loader": "^1.1.3", 24 | "webpack": "^4.41.6", 25 | "webpack-dev-server": "^3.10.3" 26 | }, 27 | "devDependencies": { 28 | "@babel/plugin-proposal-class-properties": "^7.8.3", 29 | "@types/react": "^16.9.19", 30 | "babel-cli": "^6.26.0", 31 | "babel-loader": "^8.0.6", 32 | "babel-plugin-transform-object-rest-spread": "^6.26.0", 33 | "babel-plugin-transform-react-jsx": "^6.24.1", 34 | "clean-webpack-plugin": "^3.0.0", 35 | "html-webpack-plugin": "^3.2.0", 36 | "react-dom": "^16.12.0", 37 | "ts-loader": "^6.2.1", 38 | "typescript": "^3.7.5", 39 | "webpack-cli": "^3.3.11" 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /docs/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 13 | 14 | 15 | Bootstrap Switch Button for React 16 | 17 | 18 | 19 | 30 | 31 | 32 |
33 | 62 |
63 |
64 |
65 |
66 | 67 |
68 |
69 |

Bootstrap Switch Button for React

70 |

71 | Bootstrap Switch Button is a component to use instead of plain checkboxes for responsive switch buttons. 72 |

73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 | 113 |
114 |
115 |

Installation

116 |
117 |

NPM

118 | 
npm i bootstrap-switch-button-react --save
119 |

Yarn

120 | 
yarn add bootstrap-switch-button-react
121 |
122 | 123 |
124 |

Usage

125 |
126 |

Keep state in sync using the onChange function property

127 | 

128 | import BootstrapSwitchButton from 'bootstrap-switch-button-react'
129 | 
130 | <BootstrapSwitchButton
131 |     checked={false}
132 |     onlabel='Admin User'
133 |     offlabel='Regular User'
134 |     onChange={(checked: boolean) => {
135 |         this.setState({ isUserAdmin: checked })
136 |     }}
137 | />
138 |
139 | 140 | 141 | 142 |
143 | 144 | 145 |
146 |

API

147 |
148 | 149 |

Component Props

150 |
151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 181 | 182 | 183 | 184 | 185 | 186 | 190 | 191 | 192 | 193 | 194 | 195 | 198 | 199 | 200 | 201 | 202 | 203 | 206 | 207 | 208 | 209 | 210 | 211 | 216 | 217 | 218 | 219 | 220 | 221 | 225 | 226 | 227 | 228 | 229 | 230 | 234 | 235 | 236 | 237 | 238 | 239 | 243 | 244 | 245 |
NameTypeDefaultDescription
onlabelstring | html"On"Text of the on switch button label.
offlabelstring | html"Off"Text of the off switch button label.
onstylestring"primary" 178 | Style of the on switch button.
Possible values are: 179 | primary, secondary, success, danger, warning, info, light, dark
180 |
offstylestring"light" 187 | Style of the off switch button.
Possible values are: 188 | primary, secondary, success, danger, warning, info, light, dark
189 |
checkedbooleanfalse 196 | Whether the switch button is "checked" (On) 197 |
disabledbooleanfalse 204 | Whether the switch button is disabled 205 |
sizestringnull 212 | Size of the switch button. If set to null, button is default/normal size.
213 | Possible values are: 214 | lg, sm, xs
215 |
stylestringnull 222 | Appends the provided value to the switch button's class attribute. 223 | Use this to apply custom styles to the switch button. 224 |
widthintegernull 231 | Sets the width of the switch button.
232 | If set to null, width will be calculated. 233 |
heightintegernull 240 | Sets the height of the switch button.
241 | If set to null, height will be calculated. 242 |
246 |
247 |
248 |
249 |
250 |
251 |

Author Brent Ely | Available on GitHub | Licensed MIT 252 |

253 |

254 | 255 | 256 |

257 |
258 |
259 | 260 | 261 | 262 | 263 | 264 | 265 | 266 | 267 | 268 | 269 | 270 | -------------------------------------------------------------------------------- /docs/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 13 | 14 | 15 | Bootstrap Switch Button for React 16 | 17 | 18 | 19 | 30 | 31 | 32 |
33 | 62 |
63 |
64 |
65 |
66 | 67 |
68 |
69 |

Bootstrap Switch Button for React

70 |

71 | Bootstrap Switch Button is a component to use instead of plain checkboxes for responsive switch buttons. 72 |

73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 | 113 |
114 |
115 |

Installation

116 |
117 |

NPM

118 | 
npm i bootstrap-switch-button-react --save
119 |

Yarn

120 | 
yarn add bootstrap-switch-button-react
121 |
122 | 123 |
124 |

Usage

125 |
126 |

Keep state in sync using the onChange function property

127 | 

128 | import BootstrapSwitchButton from 'bootstrap-switch-button-react'
129 | 
130 | <BootstrapSwitchButton
131 |     checked={false}
132 |     onlabel='Admin User'
133 |     offlabel='Regular User'
134 |     onChange={(checked: boolean) => {
135 |         this.setState({ isUserAdmin: checked })
136 |     }}
137 | />
138 |
139 | 140 | 141 | 142 |
143 | 144 | 145 |
146 |

API

147 |
148 | 149 |

Component Props

150 |
151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 181 | 182 | 183 | 184 | 185 | 186 | 190 | 191 | 192 | 193 | 194 | 195 | 198 | 199 | 200 | 201 | 202 | 203 | 206 | 207 | 208 | 209 | 210 | 211 | 216 | 217 | 218 | 219 | 220 | 221 | 225 | 226 | 227 | 228 | 229 | 230 | 234 | 235 | 236 | 237 | 238 | 239 | 243 | 244 | 245 |
NameTypeDefaultDescription
onlabelstring | html"On"Text of the on switch button label.
offlabelstring | html"Off"Text of the off switch button label.
onstylestring"primary" 178 | Style of the on switch button.
Possible values are: 179 | primary, secondary, success, danger, warning, info, light, dark
180 |
offstylestring"light" 187 | Style of the off switch button.
Possible values are: 188 | primary, secondary, success, danger, warning, info, light, dark
189 |
checkedbooleanfalse 196 | Whether the switch button is "checked" (On) 197 |
disabledbooleanfalse 204 | Whether the switch button is disabled 205 |
sizestringnull 212 | Size of the switch button. If set to null, button is default/normal size.
213 | Possible values are: 214 | lg, sm, xs
215 |
stylestringnull 222 | Appends the provided value to the switch button's class attribute. 223 | Use this to apply custom styles to the switch button. 224 |
widthintegernull 231 | Sets the width of the switch button.
232 | If set to null, width will be calculated. 233 |
heightintegernull 240 | Sets the height of the switch button.
241 | If set to null, height will be calculated. 242 |
246 |
247 |
248 |
249 |
250 |
251 |

Author Brent Ely | Available on GitHub | Licensed MIT 252 |

253 |

254 | 255 | 256 |

257 |
258 |
259 | 260 | 261 | 262 | 263 | 264 | 265 | 266 | 267 | 268 | 269 | 270 | -------------------------------------------------------------------------------- /docs/src/index.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import * as ReactDOM from "react-dom"; 3 | import BootstrapSwitchButton from "../../lib/bootstrap-switch-button-react"; 4 | 5 | // App Container 6 | const AppMain: React.SFC<{ compiler: string; framework: string }> = props => { 7 | let demosSizes: JSX.Element = ( 8 |
9 |

Sizes

10 |

Bootstrap Switch Button is available in different sizes.

11 |
12 |
13 | 14 | 15 | 16 | 17 |
18 |
19 |
20 |
21 | 
 22 |             
 23 |               {`
 24 | 
 25 | 
 26 | `}
 27 |             
 28 |
29 |
30 |
31 |
32 | ); 33 | 34 | let demosCustomSizes: JSX.Element = ( 35 |
36 |

Custom Sizes

37 |
38 |

39 | Bootstrap Switch Button can handle custom sizes using{" "} 40 | width and height props. 41 |

42 |
43 |
44 | 45 | 46 | 47 |
48 |
49 |
50 |
51 | 
 52 |               
 53 |                 {`
 54 | 
 55 | `}
 56 |               
 57 |
58 |
59 |
60 |
61 |
62 | ); 63 | 64 | let demosColors: JSX.Element = ( 65 |
66 |

Colors

67 |

Available in all standard bootstrap 4 button colors.

68 |
69 |
70 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 |
83 |
84 |
85 |
86 | 
 87 |             
 88 |               {`
 89 | 
 90 | 
 91 | 
 92 | 
 93 | 
 94 | 
 95 | `}
 96 |             
 97 |
98 |
99 |
100 |
101 | ); 102 | 103 | let demosOutlineColors: JSX.Element = ( 104 |
105 |

Outline Colors

106 |

Available in all standard bootstrap 4 button outline colors.

107 |
108 |
109 | 114 | 119 | 124 | 129 | 134 | 139 | 145 | 151 |
152 |
153 |
154 |
155 | 
156 |             
157 |               {`
158 | 
159 | 
160 | 
161 | 
162 | 
163 | 
164 | `}
165 |             
166 |
167 |
168 |
169 |
170 | ); 171 | 172 | let demosDarkColors: JSX.Element = ( 173 |
174 |

Dark Theme Colors

175 |

Standard colors look great on dark backgrounds.

176 |
177 |
178 | 179 | 180 | 181 | 182 | 183 | 184 | 190 | 196 |
197 |
198 |
199 |
200 | 
201 |             
202 |               {`
203 | 
204 | 
205 | 
206 | 
207 | 
208 | 
209 | `}
210 |             
211 |
212 |
213 |
214 |
215 | ); 216 | 217 | let demosDarkOutlineColors: JSX.Element = ( 218 |
219 |

Dark Theme Outline Colors

220 |

Standard outline colors look great on dark backgrounds.

221 |
222 |
223 | 228 | 233 | 238 | 243 | 248 | 253 | 259 | 265 |
266 |
267 |
268 |
269 | 
270 |             
271 |               {`
272 | 
273 | 
274 | 
275 | 
276 | 
277 | 
278 | `}
279 |             
280 |
281 |
282 |
283 |
284 | ); 285 | 286 | return ( 287 |
288 |

Demos

289 |
290 | {demosSizes} 291 | {demosCustomSizes} 292 | {demosColors} 293 | {demosOutlineColors} 294 | {demosDarkColors} 295 | {demosDarkOutlineColors} 296 |
297 | ); 298 | }; 299 | 300 | ReactDOM.render( 301 | , 302 | document.getElementById("root") 303 | ); 304 | -------------------------------------------------------------------------------- /docs/src/test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 9 | bootstrap switch button react 10 | 16 | 21 | 48 | 49 | 50 |
51 | 52 | 53 | -------------------------------------------------------------------------------- /docs/src/test.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import * as ReactDOM from "react-dom"; 3 | import BootstrapSwitchButton from "../../lib/bootstrap-switch-button-react"; 4 | 5 | // App Container 6 | const AppMain: React.SFC<{ compiler: string; framework: string }> = props => { 7 | return ( 8 |
9 |
10 |
11 |
12 |

13 | Bootstrap -vs- bootstrap-switch-button-react 14 |

15 |
16 |
17 | Bootstrap 4.3.1 18 |
19 |
20 |
21 |
22 |

23 | Compares rendered height of bootstrap & bootstrap-switch-button .form-control components 24 |

25 |
26 |
27 |
28 | 29 |
30 |

Large

31 |
32 |
33 |
34 |
35 | 36 |
37 |
38 | 39 |
40 |
41 | 44 |
45 |
46 | 51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 | 61 |
62 |

Default

63 |
64 |
65 |
66 |
67 | 68 |
69 |
70 | 71 |
72 |
73 | 76 |
77 |
78 | 83 |
84 |
85 |
86 |
87 |
88 |
89 |
90 |
91 |
92 | 93 |
94 |

Small

95 |
96 |
97 |
98 |
99 | 100 |
101 |
102 | 103 |
104 |
105 | 108 |
109 |
110 | 115 |
116 |
117 |
118 |
119 |
120 |
121 |
122 |
123 |
124 |
125 | ); 126 | }; 127 | 128 | ReactDOM.render( 129 | , 130 | document.getElementById("root") 131 | ); 132 | -------------------------------------------------------------------------------- /docs/test-height/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 9 | bootstrap switch button test 10 | 16 | 17 | 35 | 36 | 37 |
38 | 39 | 40 | -------------------------------------------------------------------------------- /docs/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "sourceMap": true, 4 | "module": "commonjs", 5 | "esModuleInterop": true, 6 | "resolveJsonModule": true, 7 | "experimentalDecorators": true, 8 | "target": "es5", 9 | "jsx": "react", 10 | "lib": [ 11 | "dom", 12 | "es6" 13 | ] 14 | }, 15 | "include": [ 16 | "." 17 | ], 18 | "compileOnSave": false 19 | } 20 | -------------------------------------------------------------------------------- /docs/webpack.config.js: -------------------------------------------------------------------------------- 1 | const { CleanWebpackPlugin } = require("clean-webpack-plugin"); 2 | const HtmlWebpackPlugin = require("html-webpack-plugin"); 3 | const path = require("path"); 4 | 5 | module.exports = { 6 | entry: "./src/index.tsx", 7 | mode: "development", 8 | plugins: [ 9 | new CleanWebpackPlugin(), 10 | new HtmlWebpackPlugin({ 11 | template: "./src/index.html" 12 | }) 13 | ], 14 | output: { 15 | path: __dirname + "/public", 16 | filename: "build/[name].[contenthash].js" 17 | }, 18 | resolve: { 19 | extensions: [".ts", ".tsx", ".js"] 20 | }, 21 | module: { 22 | rules: [ 23 | { 24 | test: /\.js$/, 25 | exclude: /(node_modules|bower_components|lib|build)/, 26 | use: { 27 | loader: "babel-loader", 28 | options: { 29 | presets: ["@babel/preset-env", "@babel/preset-react"], 30 | plugins: ["@babel/plugin-proposal-class-properties"] 31 | } 32 | } 33 | }, 34 | { 35 | test: /\.tsx?$/, 36 | loader: "ts-loader" 37 | } 38 | ] 39 | } 40 | }; 41 | -------------------------------------------------------------------------------- /img/demo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gitbrent/bootstrap-switch-button-react/f206c5bf5b2bdfc0b3f61ea6c0f83906d0d9d57d/img/demo.gif -------------------------------------------------------------------------------- /lib/bootstrap-switch-button-react.d.ts: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | 3 | export type Colors = 4 | | "primary" 5 | | "secondary" 6 | | "success" 7 | | "danger" 8 | | "warning" 9 | | "info" 10 | | "light" 11 | | "dark"; 12 | 13 | export type ColorsOutline = 14 | | "outline-primary" 15 | | "outline-secondary" 16 | | "outline-success" 17 | | "outline-danger" 18 | | "outline-warning" 19 | | "outline-info" 20 | | "outline-light" 21 | | "outline-dark"; 22 | 23 | interface BootstrapSwitchButtonProps { 24 | /** 25 | * Function to call when the SwitchButton is changed 26 | */ 27 | onChange?: (checked: boolean) => void; 28 | checked?: boolean; 29 | disabled?: boolean; 30 | onlabel?: string; 31 | offlabel?: string; 32 | onstyle?: Colors | ColorsOutline; 33 | offstyle?: Colors | ColorsOutline; 34 | size?: "xs" | "sm" | "lg"; 35 | style?: string; 36 | width?: number; 37 | height?: number; 38 | } 39 | 40 | declare class BootstrapSwitchButton extends React.Component< 41 | BootstrapSwitchButtonProps 42 | > {} 43 | 44 | export default BootstrapSwitchButton; 45 | -------------------------------------------------------------------------------- /lib/bootstrap-switch-button-react.js: -------------------------------------------------------------------------------- 1 | module.exports=function(t){var n={};function e(o){if(n[o])return n[o].exports;var r=n[o]={i:o,l:!1,exports:{}};return t[o].call(r.exports,r,r.exports,e),r.l=!0,r.exports}return e.m=t,e.c=n,e.d=function(t,n,o){e.o(t,n)||Object.defineProperty(t,n,{enumerable:!0,get:o})},e.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},e.t=function(t,n){if(1&n&&(t=e(t)),8&n)return t;if(4&n&&"object"==typeof t&&t&&t.__esModule)return t;var o=Object.create(null);if(e.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:t}),2&n&&"string"!=typeof t)for(var r in t)e.d(o,r,function(n){return t[n]}.bind(null,r));return o},e.n=function(t){var n=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(n,"a",n),n},e.o=function(t,n){return Object.prototype.hasOwnProperty.call(t,n)},e.p="",e(e.s=1)}([function(t,n){t.exports=require("react")},function(t,n,e){"use strict";e.r(n),e.d(n,"default",(function(){return d}));var o=e(0),r=e.n(o);e(2);function i(t){return(i="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function a(t,n){for(var e=0;e .btn, .btn-xs {\n\tpadding: .35rem .4rem .25rem .4rem;\n\tfont-size: .875rem;\n\tline-height: .5;\n\tborder-radius: .2rem;\n}\n\n.switch {\n\tposition: relative;\n\toverflow: hidden;\n}\n.switch.btn.btn-light, .switch.btn.btn-outline-light {\n\tborder-color: rgba(0, 0, 0, .15); /* Add a border so switch is delineated */\n}\n.switch input[type="checkbox"] {\n\tdisplay: none;\n}\n.switch-group {\n\tposition: absolute;\n\twidth: 200%;\n\ttop: 0;\n\tbottom: 0;\n\tleft: 0;\n\ttransition: left 0.35s;\n\t-webkit-transition: left 0.35s;\n\t-moz-user-select: none;\n\t-webkit-user-select: none;\n}\n.switch.off .switch-group {\n\tleft: -100%;\n}\n.switch-on {\n\tposition: absolute;\n\ttop: 0;\n\tbottom: 0;\n\tleft: 0;\n\tright: 50%;\n\tmargin: 0;\n\tborder: 0;\n\tborder-radius: 0;\n}\n.switch-off {\n\tposition: absolute;\n\ttop: 0;\n\tbottom: 0;\n\tleft: 50%;\n\tright: 0;\n\tmargin: 0;\n\tborder: 0;\n\tborder-radius: 0;\n\tbox-shadow: none;\n}\n.switch-handle {\n\tposition: relative;\n\tmargin: 0 auto;\n\tpadding-top: 0px;\n\tpadding-bottom: 0px;\n\theight: 100%;\n\twidth: 0px;\n\tborder-width: 0 1px;\n\tbackground-color: #fff;\n}\n\n.switch.btn-outline-primary .switch-handle {\n\tbackground-color: var(--primary);\n\tborder-color: var(--primary);\n}\n.switch.btn-outline-secondary .switch-handle {\n\tbackground-color: var(--secondary);\n\tborder-color: var(--secondary);\n}\n.switch.btn-outline-success .switch-handle {\n\tbackground-color: var(--success);\n\tborder-color: var(--success);\n}\n.switch.btn-outline-danger .switch-handle {\n\tbackground-color: var(--danger);\n\tborder-color: var(--danger);\n}\n.switch.btn-outline-warning .switch-handle {\n\tbackground-color: var(--warning);\n\tborder-color: var(--warning);\n}\n.switch.btn-outline-info .switch-handle {\n\tbackground-color: var(--info);\n\tborder-color: var(--info);\n}\n.switch.btn-outline-light .switch-handle {\n\tbackground-color: var(--light);\n\tborder-color: var(--light);\n}\n.switch.btn-outline-dark .switch-handle {\n\tbackground-color: var(--dark);\n\tborder-color: var(--dark);\n}\n.switch[class*="btn-outline"]:hover .switch-handle {\n\tbackground-color: var(--light);\n\topacity: 0.5;\n}\n\n/* NOTE: Must come first, so classes below override as needed */\n/* bootstrap-4.x .form-control {height} values used as `min-height` to mirror output sizes */\n\n.switch.btn { min-width: 3.7rem; min-height: calc(1.5em + .75rem + 2px); }\n.switch-on.btn { padding-right: 1.5rem; }\n.switch-off.btn { padding-left: 1.5rem; }\n\n.switch.btn-lg { min-width: 5rem; line-height: 1.5; min-height: calc(1.5em + 1rem + 2px); }\n.switch-on.btn-lg { padding-right: 2rem; }\n.switch-off.btn-lg { padding-left: 2rem; }\n.switch-handle.btn-lg { width: 2.5rem; }\n\n.switch.btn-sm { min-width: 3.25rem; min-height: calc(1.5em + .5rem + 2px); }\n.switch-on.btn-sm { padding-right: 1rem; }\n.switch-off.btn-sm { padding-left: 1rem; }\n\n/* `xs` (bootstrap-3.3 - .btn - h:22px) */\n.switch.btn-xs { min-width: 3.125rem; min-height: 1.375rem; }\n.switch-on.btn-xs { padding-right: .8rem; }\n.switch-off.btn-xs { padding-left: .8rem; }\n',""]),t.exports=n},function(t,n,e){"use strict";t.exports=function(t){var n=[];return n.toString=function(){return this.map((function(n){var e=function(t,n){var e=t[1]||"",o=t[3];if(!o)return e;if(n&&"function"==typeof btoa){var r=(a=o,s=btoa(unescape(encodeURIComponent(JSON.stringify(a)))),c="sourceMappingURL=data:application/json;charset=utf-8;base64,".concat(s),"/*# ".concat(c," */")),i=o.sources.map((function(t){return"/*# sourceURL=".concat(o.sourceRoot||"").concat(t," */")}));return[e].concat(i).concat([r]).join("\n")}var a,s,c;return[e].join("\n")}(n,t);return n[2]?"@media ".concat(n[2]," {").concat(e,"}"):e})).join("")},n.i=function(t,e,o){"string"==typeof t&&(t=[[null,t,""]]);var r={};if(o)for(var i=0;i { 59 | this.state.checked ? this.off() : this.on(); 60 | }; 61 | off = () => { 62 | if (!this.state.disabled) { 63 | this.setState({ 64 | checked: false, 65 | }); 66 | if (this.props.onChange) this.props.onChange(false); 67 | } 68 | }; 69 | on = () => { 70 | if (!this.state.disabled) { 71 | this.setState({ 72 | checked: true, 73 | }); 74 | if (this.props.onChange) this.props.onChange(true); 75 | } 76 | }; 77 | enable = () => { 78 | this.setState({ 79 | disabled: false, 80 | }); 81 | }; 82 | disable = () => { 83 | this.setState({ 84 | disabled: true, 85 | }); 86 | }; 87 | 88 | render = () => { 89 | let switchStyle = {}; 90 | this.state.width ? (switchStyle.width = this.state.width + 'px') : null; 91 | this.state.height ? (switchStyle.height = this.state.height + 'px') : null; 92 | 93 | let labelStyle = {}; 94 | if (this.state.height) labelStyle.lineHeight = 'calc(' + this.state.height + 'px * 0.8)'; 95 | 96 | return ( 97 |
107 |
108 | 109 | {this.state.onlabel} 110 | 111 | 112 | {this.state.offlabel} 113 | 114 | 115 |
116 |
117 | ); 118 | }; 119 | } 120 | -------------------------------------------------------------------------------- /src/style.css: -------------------------------------------------------------------------------- 1 | /*\ 2 | |*| :: Bootstrap Switch Button :: 3 | |*| 4 | |*| Bootstrap Switch Button (React) 5 | |*| https://github.com/gitbrent/bootstrap-switch-button-react 6 | |*| 7 | |*| This library is released under the MIT Public License (MIT) 8 | |*| 9 | |*| Bootstrap Switch Button (C) 2019-present Brent Ely (https://github.com/gitbrent) 10 | |*| 11 | |*| Permission is hereby granted, free of charge, to any person obtaining a copy 12 | |*| of this software and associated documentation files (the "Software"), to deal 13 | |*| in the Software without restriction, including without limitation the rights 14 | |*| to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 15 | |*| copies of the Software, and to permit persons to whom the Software is 16 | |*| furnished to do so, subject to the following conditions: 17 | |*| 18 | |*| The above copyright notice and this permission notice shall be included in all 19 | |*| copies or substantial portions of the Software. 20 | |*| 21 | |*| THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 22 | |*| IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 23 | |*| FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 24 | |*| AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 25 | |*| LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 26 | |*| OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 27 | |*| SOFTWARE. 28 | \*/ 29 | 30 | .btn-group-xs > .btn, .btn-xs { 31 | padding: .35rem .4rem .25rem .4rem; 32 | font-size: .875rem; 33 | line-height: .5; 34 | border-radius: .2rem; 35 | } 36 | 37 | .switch { 38 | position: relative; 39 | overflow: hidden; 40 | } 41 | .switch.btn.btn-light, .switch.btn.btn-outline-light { 42 | border-color: rgba(0, 0, 0, .15); /* Add a border so switch is delineated */ 43 | } 44 | .switch input[type="checkbox"] { 45 | display: none; 46 | } 47 | .switch-group { 48 | position: absolute; 49 | width: 200%; 50 | top: 0; 51 | bottom: 0; 52 | left: 0; 53 | transition: left 0.35s; 54 | -webkit-transition: left 0.35s; 55 | -moz-user-select: none; 56 | -webkit-user-select: none; 57 | } 58 | .switch.off .switch-group { 59 | left: -100%; 60 | } 61 | .switch-on { 62 | position: absolute; 63 | top: 0; 64 | bottom: 0; 65 | left: 0; 66 | right: 50%; 67 | margin: 0; 68 | border: 0; 69 | border-radius: 0; 70 | } 71 | .switch-off { 72 | position: absolute; 73 | top: 0; 74 | bottom: 0; 75 | left: 50%; 76 | right: 0; 77 | margin: 0; 78 | border: 0; 79 | border-radius: 0; 80 | box-shadow: none; 81 | } 82 | .switch-handle { 83 | position: relative; 84 | margin: 0 auto; 85 | padding-top: 0px; 86 | padding-bottom: 0px; 87 | height: 100%; 88 | width: 0px; 89 | border-width: 0 1px; 90 | background-color: #fff; 91 | } 92 | 93 | .switch.btn-outline-primary .switch-handle { 94 | background-color: var(--primary); 95 | border-color: var(--primary); 96 | } 97 | .switch.btn-outline-secondary .switch-handle { 98 | background-color: var(--secondary); 99 | border-color: var(--secondary); 100 | } 101 | .switch.btn-outline-success .switch-handle { 102 | background-color: var(--success); 103 | border-color: var(--success); 104 | } 105 | .switch.btn-outline-danger .switch-handle { 106 | background-color: var(--danger); 107 | border-color: var(--danger); 108 | } 109 | .switch.btn-outline-warning .switch-handle { 110 | background-color: var(--warning); 111 | border-color: var(--warning); 112 | } 113 | .switch.btn-outline-info .switch-handle { 114 | background-color: var(--info); 115 | border-color: var(--info); 116 | } 117 | .switch.btn-outline-light .switch-handle { 118 | background-color: var(--light); 119 | border-color: var(--light); 120 | } 121 | .switch.btn-outline-dark .switch-handle { 122 | background-color: var(--dark); 123 | border-color: var(--dark); 124 | } 125 | .switch[class*="btn-outline"]:hover .switch-handle { 126 | background-color: var(--light); 127 | opacity: 0.5; 128 | } 129 | 130 | /* NOTE: Must come first, so classes below override as needed */ 131 | /* bootstrap-4.x .form-control {height} values used as `min-height` to mirror output sizes */ 132 | 133 | .switch.btn { min-width: 3.7rem; min-height: calc(1.5em + .75rem + 2px); } 134 | .switch-on.btn { padding-right: 1.5rem; } 135 | .switch-off.btn { padding-left: 1.5rem; } 136 | 137 | .switch.btn-lg { min-width: 5rem; line-height: 1.5; min-height: calc(1.5em + 1rem + 2px); } 138 | .switch-on.btn-lg { padding-right: 2rem; } 139 | .switch-off.btn-lg { padding-left: 2rem; } 140 | .switch-handle.btn-lg { width: 2.5rem; } 141 | 142 | .switch.btn-sm { min-width: 3.25rem; min-height: calc(1.5em + .5rem + 2px); } 143 | .switch-on.btn-sm { padding-right: 1rem; } 144 | .switch-off.btn-sm { padding-left: 1rem; } 145 | 146 | /* `xs` (bootstrap-3.3 - .btn - h:22px) */ 147 | .switch.btn-xs { min-width: 3.125rem; min-height: 1.375rem; } 148 | .switch-on.btn-xs { padding-right: .8rem; } 149 | .switch-off.btn-xs { padding-left: .8rem; } 150 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "sourceMap": true, 4 | "module": "commonjs", 5 | "esModuleInterop": true, 6 | "resolveJsonModule": true, 7 | "experimentalDecorators": true, 8 | "target": "es5", 9 | "jsx": "react", 10 | "lib": [ 11 | "dom", 12 | "es6" 13 | ] 14 | }, 15 | "include": [ 16 | "src" 17 | ], 18 | "compileOnSave": false 19 | } 20 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | var path = require("path"); 2 | module.exports = { 3 | mode: "production", 4 | entry: "./src/bootstrap-switch-button-react.js", 5 | output: { 6 | path: path.resolve(__dirname, "lib"), 7 | filename: "bootstrap-switch-button-react.js", 8 | libraryTarget: "commonjs2" 9 | }, 10 | module: { 11 | rules: [ 12 | { 13 | test: /\.js$/, 14 | include: path.resolve(__dirname, "src"), 15 | exclude: /(node_modules|bower_components|lib|build)/, 16 | use: { 17 | loader: "babel-loader", 18 | options: { 19 | presets: ["@babel/preset-env", "@babel/preset-react"], 20 | plugins: ["@babel/plugin-proposal-class-properties"] 21 | } 22 | } 23 | }, 24 | { 25 | test: /\.css$/, 26 | use: ["style-loader", "css-loader"] 27 | } 28 | ] 29 | }, 30 | externals: { 31 | react: "commonjs react" 32 | } 33 | }; 34 | --------------------------------------------------------------------------------