react-awesome-toggle-switch

react-awesome-toggle-switch

ReactJS 19 different toggle switches designs in one component

Install

npm i react-awesome-toggle-switch --save

GitLab

https://gitlab.com/damjan89/react-awesome-toggle-switch

Usage

React >= 16.9.0

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