# react-toggle-slider

[![npm version](https://badge.fury.io/js/react-toggle-slider.svg)](https://www.npmjs.com/package/react-toggle-slider)

A highly customizable React toggle slider component.

![default](https://user-images.githubusercontent.com/20135416/122633007-293cda80-d0a4-11eb-90e9-86b1cce29061.gif)
![square](https://user-images.githubusercontent.com/20135416/122632977-03173a80-d0a4-11eb-9ada-ba742ddf5aba.gif)


## 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>
    );
}

```