react-awesome-toggle-switch
Version:
React toggle switch with more than 19 different designs
114 lines (87 loc) • 4.6 kB
Markdown
# react-awesome-toggle-switch
> ReactJS 19 different toggle switches designs in one component
[](https://www.npmjs.com/package/react-awesome-toggle-switch) [](https://standardjs.com)
## Install
```bash
npm i react-awesome-toggle-switch --save
```
## GitLab
https://gitlab.com/damjan89/react-awesome-toggle-switch
## Usage
React >= 16.9.0
```tsx
import AwesomeToggleSwitch from "react-awesome-toggle-switch";
export default class ReactAwesomeToggleSwitchExample extends React.Component<{}, IState> {
constructor(props:any) {
super(props);
this.state = {
val: true,
config:{
toggleTheme: 'DefaultSwitch',
title: 'Title',
leftText:'On',
rightText:'Off',
}
}
}
valChanged(e:any){
this.setState({
val: e
});
}
render() {
return (
<div style={{width: '100%'}}>
<AwesomeToggleSwitch value={this.state.val} onChange={(e:any)=>this.valChanged(e)} config={this.state.config}></AwesomeToggleSwitch>
</div>
);
}
}
ReactDOM.render(<ReactAwesomeToggleSwitchExample/>, document.getElementById('root'));
```
### Toggle Themes (this.state.config.toggleTheme)
```
DefaultSwitch
RadialSwitch
SimpleSwitch
OldSchoolSwitch
GenderSwitch
BulbSwitch
LampSwitch
LockSwitch
NeonSwitch
ZedDashSwitch
TotoroSwitch
ElasticSwitch
SmileySwitch
RollingSwitch
DayNightSwitch
InvertSwitch
FlatSwitch
Neon2Switch
BearSwitch
```
## Preview
 -> DefaultSwitch
 -> BearSwitch
 -> BulbSwitch
 -> DayNightSwitch
 -> ElasticSwitch
 -> FlatSwitch
 -> GenderSwitch
 -> InvertSwitch
 -> LampSwitch
 -> LockSwitch
 -> NeonSwitch
 -> Neon2Switch
 -> oldSchoolSwitch
 -> RadialSwitch
 -> RollingSwitch
 -> SimpleSwitch
 -> SmileySwitch
 -> TotoroSwitch
 -> ZenDashSwitch
## License
Special Thanks to Vladimir Stepura for this post (all pure html & css can be found in url bellow) and all other developers/designers
url: https://freefrontend.com/css-toggle-switches/
MIT © [Nick Dam](https://gitlab.com/damjan89)