3.0.2 • Published 1 year ago

@juice789/react-toggle v3.0.2

Weekly downloads
-
License
MIT
Repository
github
Last release
1 year ago

Toggle

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

gif

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

nametypedescription
isOnbooleanSet initial state.
valuebooleanUse this to control the component. Overrides the isOn prop.
textstring or JSXText displayed on the thumb.
onChangefunctionChange event handler. An object is passed to the callback on toggle: { value: '0' } or { value: '1' }
remapobjectRemap the values of the object passed to the onChange callback. format:{ '0': 'custom value on toggle off', '1': 'custom value on toggle on' }
stylesobject or arrayCustom 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.
defaultSizecss valueSet this value to easily resize the component instead of setting custom style rules. Default: 25px.
paddingcss valueSet 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

3.0.2

1 year ago

3.0.1

3 years ago

3.0.0

3 years ago

2.0.1

3 years ago

2.0.0

3 years ago

1.0.2

3 years ago

1.0.1

3 years ago

1.0.0

3 years ago