Toggle

A simple React toggle component. Features: ✅ Custom styles ✅ Custom track and thumb content ✅ Controlled component ✅ Styled components theme support

Installation

npm install @juice789/react-toggle

Demo

Open storybook demo: Open demo

Usage

import Toggle from '@juice789/react-toggle'

<Toggle />

<Toggle text={<>thumb<br />txt</>} defaultSize={'50px'} >
  <Toggle.Left>I'm off</Toggle.Left>
  <Toggle.Right>I'm on</Toggle.Right>
</Toggle>

Props

all props are optional

| name | type | description | | ----------- | --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | isOn | boolean | Set initial state. | | value | boolean | Use this to control the component. Overrides the isOn prop. | | text | string or JSX | Text displayed on the thumb. | | onChange | function | Change event handler. An object is passed to the callback on toggle: { value: '0' } or { value: '1' } | | remap | object | Remap the values of the object passed to the onChange callback. format:{ '0': 'custom value on toggle off', '1': 'custom value on toggle on' } | | styles | object or array | Custom styles.Use a single object to style both on and off state.Use an array with two style objects to use different styles for the off and on states. | | defaultSize | css value | Set this value to easily resize the component instead of setting custom style rules. Default: 25px. | | padding | css value | Set this value to easily set the track padding instead of setting style rules. Default: 0px. |

Styles object

Override any css rule of the component.

The keys of the styles object may be: 'container', 'track', 'thumbOuter', 'thumb', 'trackContent'. A value of the object should a function that returns a valid css style in object format. The default style rules of the specific component is passed to the function as the first parameter. All other props are passed as the second parameter. Check out the Storybook demo for example code.

Quick example:

const styles = {
  track: (defaults, props) => ({
    ...defaults,
    background: 'rebeccapurple',
    fontSize: '12px'
  }),
  trackContent: (defaults, props) => ({
    ...defaults,
    color: props.theme.mainColor, //ThemeProvider theme
    fontWeight: 'bold'
  })
}

License

MIT