React Switch Toggle

Installing

For now this component is only available as CommonJS module. Install via NPM running:

npm install react-switch-toggle-component

Demo

Using

import React from 'react';
import SwitchToggle from 'react-switch-toggle-component';

class IndexPage extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            value: false
        }
    }

    componentDidMount() {}

    onChange = (checked) => {
        this.setState({
            value: checked
        })
    }

    render() {
        return (
            <div>
                <SwitchToggle size="large" id="test-1" ref="switchTest" checked={true} onChange={this.onChange} />
            </div>
        )
    }
}

export default IndexPage;

let container = document.getElementById('container');
ReactDOM.render(<IndexPage />, container);

Methods

getValue()

Get value of Switch Toggle component. If it turns on, the value will be true. Otherwise, it will be false. Using:

'use strict';

import React from 'react';
import SwitchToggle from 'react-switch-toggle-component';


class IndexPage extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            value: false
        }
    }

    componentDidMount() {}

    onChange = (checked) => {
        this.setState({
            value: checked
        })
    }
    
    getValue = () => {
        console.log(this.refs.switchTest.getValue());
    }

    render() {
        return (
            <div>
                <SwitchToggle size="large" id="test-1" ref="switchTest" checked={true} onChange={this.onChange} />
                <button onClick={this.getValue}>getValue</button>
            </div>
        )
    }
}

export default IndexPage;

let container = document.getElementById('container');
ReactDOM.render(<IndexPage />, container);

setValue(value)

Turn on or off switch toggle component and update its value. For example:

• If your switch toggle is currently on => it will update UI to be off and value of it will be false
• If your switch toggle is currently off => it will update UI to be on and value of it will be true Using:

'use strict';

import React from 'react';
import SwitchToggle from 'react-switch-toggle-component';


class IndexPage extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            value: false
        }
    }

    componentDidMount() {}

    onChange = (checked) => {
        this.setState({
            value: checked
        })
    }

    onTurnOn = () => {
        this.refs.switchTest.setValue(true);
    }

    onTurnOff = () => {
        this.refs.switchTest.setValue(false);
    }

    render() {
        let valueDisplay = '';
        if(this.state.value) {
            valueDisplay = 'true - turn on';
        } else {
            valueDisplay = 'false - turn off';
        }

        return (
            <div>
                <SwitchToggle size="large" id="test-1" ref="switchTest" checked={true} onChange={this.onChange} />
                <button onClick={this.onTurnOn}>turn on</button>
                <button onClick={this.onTurnOff}>turn off</button>
                <p>{ valueDisplay }</p>
            </div>
        )
    }
}

export default IndexPage;

let container = document.getElementById('container');
ReactDOM.render(<IndexPage />, container);

Creating a switch toggle

The switch toggle object has the following properties:

| Name | Type | Default | Description | |------------ |--------------- |--------- |------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | id | string & required | sw-1 | id of switch toggle. It is a required prop | | size | string | large | Size of switch toggle component. There are 3 size: small, medium, large | | style | string | style-1 | Style of switch toggle. | | onChange | function | null | A callback function that will be called when the switch toggle switches on of switches off. |

Styles

The css of switch toggle we using sass. You can change this style by overriding the default css and use your own styles.

Overriding

Creating new-file.scss and copy all of this mixins function from below to your new sass file (new-file.scss). Then define new style or override exist style.

$transition-time: 0.4s;

$large-configs: (
  inputWidth: 120px,
  inputHeight: 60px,
  switchDiameter: 52px,
  marginLeft: 64px
);

$medium-configs: (
  inputWidth: 60px,
  inputHeight: 30px,
  switchDiameter: 26px,
  marginLeft: 30px
);

$small-configs: (
  inputWidth: 30px,
  inputHeight: 15px,
  switchDiameter: 10px,
  marginLeft: 16px
);

$style-1: (
  bgBorderInputActive: #8ce196,
  bgSwitchDefault: #dddddd,
  bgSwitchActive: #8ce196,
  bgInputDefault: #fff,
  bgInputActive: #fff
);

@mixin config-switch-toggle($configs, $style) {
    input.cmn-toggle-round-flat + label {
        padding: 2px;
        width: #{map-get($configs, inputWidth)};
        height: #{map-get($configs, inputHeight)};
        border-radius: #{map-get($configs, inputHeight)};
        background-color: #{map-get($style, bgSwitchDefault)};
        transition: background $transition-time;
    }
    input.cmn-toggle-round-flat + label:before,
    input.cmn-toggle-round-flat + label:after {
        display: block;
        position: absolute;
        content: "";
    }
    input.cmn-toggle-round-flat + label:before {
        top: 2px;
        left: 2px;
        bottom: 2px;
        right: 2px;
        background-color: #{map-get($style, bgInputDefault)};
        border-radius: #{map-get($configs, inputHeight)};
        transition: background $transition-time;
    }
    input.cmn-toggle-round-flat + label:after {
        top: 4px;
        left: 4px;
        bottom: 4px;
        width: #{map-get($configs, switchDiameter)};
        border-radius: #{map-get($configs, switchDiameter)};
        background-color: #{map-get($style, bgSwitchDefault)};
        transition: margin $transition-time, background $transition-time;
    }

    input.cmn-toggle-round-flat:checked + label:before {
        background-color: #{map-get($style, bgInputActive)};
    }
    input.cmn-toggle-round-flat:checked + label {
        background-color: #{map-get($style, bgBorderInputActive)};
    }
    input.cmn-toggle-round-flat:checked + label:after {
        margin-left: #{map-get($configs, marginLeft)};
        background-color: #{map-get($style, bgSwitchActive)};
    }
}


.switch {
    display: table-cell;
    vertical-align: middle;
    padding: 10px;

    .cmn-toggle {
        position: absolute;
        margin-left: -9999px;
        visibility: hidden;
    }
    .cmn-toggle + label {
        display: block;
        position: relative;
        cursor: pointer;
        outline: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    &.style-1 {
        &.large {
            @include config-switch-toggle($large-configs, $style-1);
        }

        &.medium {
            @include config-switch-toggle($medium-configs, $style-1);
        }

        &.small {
            @include config-switch-toggle($small-configs, $style-1);
        }
    }
}

Remember, you must import new-file.scss to your page to take effect.

Roadmap

• Improve tests and coverage
• Improve performance

Contributions

Clone this repo by running:

git clone https://github.com/nndung179/react-switch-toggle-component.git

Enter the project folder and install the dependencies:

npm install

To start a development server and use the example app to load the component, type:

npm start

Open http://localhost:8000.

Run the tests:

npm test

You can find the coverage details under coverage/ folder.

After that, just edit the files under src/ and example/src/app.js. It uses React hot reload.

This component is under construction. I will add more guidelines to who wants to contribute.