3.0.1 • Published 2 years ago
@juice789/react-toggle v3.0.1
Toggle
A simple React toggle component. Supports custom styling, custom track and thumb content, can be used as a controlled component.
Installation
npm install @juice789/react-toggleDemo
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 | use this value to easily resize the component instead of setting custom style rules. Default: 25px. |
| padding | css value | use 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 object may be the: 'outer', 'thumbOuter', 'thumb', 'half', 'track'. A value of the object should be 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: 'red',
fontSize: '12px'
})
}License
MIT