react-toggle-slider
Version:
A highly customizable React toggle slider component.
119 lines (86 loc) • 4.15 kB
Markdown
# react-toggle-slider
[](https://www.npmjs.com/package/react-toggle-slider)
A highly customizable React toggle slider component.
## Installation
Install using NPM:
`npm install react-toggle-slider`
Or install using Yarn:
`yarn add react-toggle-slider`
## Usage
To add the component, simply import `ToggleSlider` and use it in your app.
```tsx
import { ToggleSlider } from "react-toggle-slider";
function App() {
return (
<div>
<ToggleSlider/>
</div>
);
}
```
The slider works without any options, but it can be heavily customized.
### Options
| Option | Default | Description |
| ------------- | ------------- | ------------- |
| `active` | `false` | Initial state |
| `draggable` | `true` | Whether or not the handle can be dragged |
| `onToggle` | `undefined` | Function to call when slider is toggled, passes active state as parameter |
| `padding` | `5` | Padding between the handle and the sides of the bar |
| `flip` | `false` | Handle starts of right instead of left |
| `transitionDuration` | `100ms` | Transition duration of the slider |
| `handleSize` | `18` | Diameter of the handle |
| `handleBorderRadius` | `16` | Border radius of the handle |
| `handleBackgroundColor` | `#ffffff` | Background color of the handle |
| `handleBackgroundColorActive` | `undefined` | Background color of the handle while active |
| `handleStyles` | `undefined` | Extra styles object to be applied to the handle |
| `handleStylesActive` | `undefined` | Extra styles object to be applied to the handle while active |
| `handleTransitionDuration` | `undefined` | Transition duration of the handle (overrides `transitionDuration`) |
| `handleRenderer` | `undefined` | React node to completely replace the handle |
| `handleRendererActive` | `undefined` | React node to completely replace the handle while active |
| `barHeight` | `26` | Height of the bar |
| `barWidth` | `48` | Width of the bar |
| `barBorderRadius` | `16` | Border radius of the bar |
| `barBackgroundColor` | `#dedede` | Background color of the bar |
| `barBackgroundColorActive` | `#06b7e7` | Background color of the bar while active |
| `barTransitionDuration` | `undefined` | Transition duration of the bar (overrides `transitionDuration`) |
| `barTransitionType` | `fade` | Specify if the bar should `fade` or `slide` |
| `barStyles` | `undefined` | Extra styles object to be applied to the bar |
| `barStylesActive` | `undefined` | Extra styles object to be applied to the bar while active |
| `barRenderer` | `undefined` | React node to completely replace the bar |
| `barRendererActive` | `undefined` | React node to completely replace the bar while active |
If any options which refer to the active state of the slider are undefined, it will default to the
inactive value.
## Accessing the state of the slider
### Callback
The slider's state can be accessed using a callback. This can be used with `useState` or something
similar to represent the status on the page.
```tsx
import { ToggleSlider } from "react-toggle-slider";
function App() {
const [active, setActive] = useState(false);
return (
<div>
<ToggleSlider onToggle={state => setActive(state)}/>
Slider is {active ? "active" : "inactive"}
</div>
);
}
```
### Hook
The slider can also be used as a hook. This can be used to access the state of the slider without
a callback. To do this, import the `useToggleSlider` function.
Options can be passed into the function as an object.
```tsx
import { useToggleSlider } from "react-toggle-slider"
function App() {
const [toggleSlider, active] = useToggleSlider({barBackgroundColorActive: "red"});
return (
<div>
{ toggleSlider }
Slider is {active ? "active" : "inactive"}
</div>
);
}
```