react-awesome-toggle-switch

    1.0.20 • Public • Published

    react-awesome-toggle-switch

    ReactJS 19 different toggle switches designs in one component

    NPM JavaScript Style Guide

    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

    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

    Install

    npm i react-awesome-toggle-switch

    DownloadsWeekly Downloads

    0

    Version

    1.0.20

    License

    ISC

    Unpacked Size

    148 kB

    Total Files

    43

    Last publish

    Collaborators

    • nickdam