react-awesome-toggle-switch

> ReactJS 19 different toggle switches designs in one component

 

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 (

this.valChanged(e)} config={this.state.config}>

);
}
}
ReactDOM.render(, document.getElementById('root'));
`

$3

`
DefaultSwitch
RadialSwitch
SimpleSwitch
OldSchoolSwitch
GenderSwitch
BulbSwitch
LampSwitch
LockSwitch
NeonSwitch
ZedDashSwitch
TotoroSwitch
ElasticSwitch
SmileySwitch
RollingSwitch
DayNightSwitch
InvertSwitch
FlatSwitch
Neon2Switch
BearSwitch
``

Preview

!https://freefrontend.com/css-toggle-switches/ -> DefaultSwitch

!https://freefrontend.com/css-toggle-switches/ -> BearSwitch

!https://freefrontend.com/css-toggle-switches/ -> BulbSwitch

!https://freefrontend.com/css-toggle-switches/ -> DayNightSwitch

!https://freefrontend.com/css-toggle-switches/ -> ElasticSwitch

!https://freefrontend.com/css-toggle-switches/ -> FlatSwitch

!https://freefrontend.com/css-toggle-switches/ -> GenderSwitch

!https://freefrontend.com/css-toggle-switches/ -> InvertSwitch

!https://freefrontend.com/css-toggle-switches/ -> LampSwitch

!https://freefrontend.com/css-toggle-switches/ -> LockSwitch

!https://freefrontend.com/css-toggle-switches/ -> NeonSwitch

!https://freefrontend.com/css-toggle-switches/ -> Neon2Switch

!https://freefrontend.com/css-toggle-switches/ -> oldSchoolSwitch

!https://freefrontend.com/css-toggle-switches/ -> RadialSwitch

!https://freefrontend.com/css-toggle-switches/ -> RollingSwitch

!https://freefrontend.com/css-toggle-switches/ -> SimpleSwitch

!https://freefrontend.com/css-toggle-switches/ -> SmileySwitch

!https://freefrontend.com/css-toggle-switches/ -> TotoroSwitch

!https://freefrontend.com/css-toggle-switches/ -> 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