Toggs NPM | npm.io

toggs

a React toggle that doesnt suck

material ios

Inspired by this tweet

:exclamation: CAUTION

this was hacked together using an self updated version of create-react-library; this is my first time creating a library :sweat_smile:

create-react-library and all deps were updated
create-react-app/example folder was removed
react-cosmos is used instead for dev/demo purposes

:sunglasses: INSTALL

$ yarn add toggs

:fire: USAGE

import React, { useState } from 'react'
import Toggs from 'toggs'

const Example = () => {
  const [ checked, setChecked ] = useState(false)
  return (
    <Toggs
      check={checked}
      onClick={() => setChecked(!checked)}
    />
  )
}

Examples

:eyes: PROPS

Prop	Type	Default	Description
`checked`	bool	false	Self-explanatory
`onChange`	func	noOp	Function to invoke when User clicks on component. Inverted checked value will be passed as arg to the function.
`theme`	string	`material`	Choose between `material` or `ios`
`trueColor`	string	`#14D790`	Hex or rgb(a) value for when toggle is true.
`falseColor`	string	`#000000`	Hex or rgb(a) value for when toggle is false.
`width`	number	34	Width in `px`. Will automatically scale.