React Toggles

A simple collection of decently customizable toggle buttons available in 3 basic styles namely ios, skewed and flip. Since this module is more of a plug and play, it uses inline css to style the toggle button so that no external css styles have to be imported.

Installation

npm install reacttoggles

Demo

The demo with live examples can be viewed here.

Use

The reaact toggele comes in 3 variants. The same can be imported and used in the project using

ES6

import { IosToggle, SkewToggle, FlipToggle } from 'reacttoggles'

RequireJS

var Toggle = require('reacttoggles')

var IosToggle = Toggle.IosToggle

var SkewToggle = Toggle.SkewToggle

var FlipToggle = Toggle.FlipToggle

Motivation

Writing a small component like a toggle button is a pain since this doesn't come out of the box with frameworks like bootstrap. Sometimes, all you need is a simple import with a plug and play feature withiut any setup. This is what this modules helps to achieve

Repo

https://github.com/nerdchacha/react-toggles

Props

| Prop | Type | Description | Valid | Demo | |--- |--- |--- | --- | --- | | checked | bool | If true, the toggle is checked. If false, the toggle is unchecked | All | demo1 demo2 | | fontSize | number | Since all dimensions are set using em, this will the fontSize os the em value of the wrapper div. If you want to give the size using css, don't use this property and instead give fontSize using css instead. | All | demo | | disabled | bool | If true, the toggle is disabled. If false, the toggle is enabled | All | demo | | attributes | object | A key value pair of attributes that needs to be set for the input element. This may include attributes like name, id etc | All | demo | | handleChange | function | A callback function that is executed everytime the toggle value changes. The current toggle value is passed as a parameter to this function | All | demo | | handleClick | function | A callback function that is executed everytime the toggle is clicked. The current synthetic event is passed as a parameter to this function | All | demo | | toggleIcon | object | Configuration for the toggle button. | IosToggle | demo | | onProps | object | Configuration for on state |All | demo1 demo2 | | offProps | object | Configuration for off state |All | demo1 demo2 |

toggleIcon : {
    component: String OR ReactElement
    style: {
        backgroundColor: String,
        color: String,
    }
}

NOTE:

The checkbox has a default value of id and name as toggle. Please make sure you provide different values using the attribute props in case you are using more than one toggle button in your project

component : string OR React Element (usually icon) to be displayed when toggle is in on state (only for IosToggle)

backgroundColor: background color of the toggle when the toggle is in on state (only for IosToggle)

color: font color of the toggle when the toggle is in on state (only for IosToggle)

onProps : {
    component: String OR ReactElement
    style: {
        backgroundColor: String,
        color: String,
        toggleBorder: String,
        buttonBorder: String
    }
}

component : string OR React Element (usually icon) to be displayed when toggle is in on state

backgroundColor: background color of the toggle when the toggle is in on state

color: font color of the toggle when the toggle is in on state

toggleBorder: toggle button/bar border color when the toggle is in on state (only for IosToggle)

buttonBorder: toggle button color when the toggle is in on state (only for IosToggle)

offProps : {
    component: String OR ReactElement
    style: {
        backgroundColor: String,
        color: String,
        toggleBorder: String,
        buttonBorder: String
    }
}

component : string OR React Element (usually icon) to be displayed when toggle is in off state

backgroundColor: background color of the toggle when the toggle is in off state

color: font color of the toggle when the toggle is in off state

toggleBorder: toggle button/bar border color when the toggle is in off state (only for IosToggle)

buttonBorder: toggle button color when the toggle is in off state (only for IosToggle)

Using External CSS instead of Inline CSS

We understand that using inline styles is such a pain in the neck specially when you want to override some properties using an external css file.

with the v0.2.0, the module comes with 3 default css stylesheets namely ios.css, skew.css and flip.css available inside the dist folder.

You can now import just the raw toggle (without the inline wrapper element) using

var Toggle = require('reacttoggles').Toggle

OR

let { Toggle } from 'reacttoggles'

Considering you are running through webpack, you can then require any of the 3 css, depending on your requirement, in the same file using

require('reacttoggles/dist/ios.css')

require('reacttoggles/dist/skew.css')

require('reacttoggles/dist/flip.css')

You can finally use the toggle using

<Toggle type='ios' />

<Toggle type='skew' />

<Toggle type='flip' />

NOTE: the type prop is required and must be provided for the css to be applied properly.

NOTE: you can still use all the above mentioned props with this toggle except for style related props. For example

<Toggle type='skew' onProps={{component: <FontAwesome name='times' />}} />

will work fine

but

<Toggle type='skew' onProps={{style: backgroundColor: 'orange'}} />

will make no differene to the css

Dev

you can clone the repo and start the dev mode using npm start command

Tests

The modules currently comes with a test setup but with very minimilistic test cases. Test can be run using from the module directry using the script

npm run test:local

Change Log

changelog can we viewed here

Authors

Yatin Gera initial work and setup

Issue tracker

https://github.com/nerdchacha/react-toggles/issues

License

This project is licensed under the MIT License