From 0753be48cba3426b6e03fa8109c4049e35e3e775 Mon Sep 17 00:00:00 2001
From: Mark Vadeika <markvadeika@gmail.com>
Date: Sat, 12 Jun 2021 20:30:53 -0400
Subject: [PATCH] added README.md

---
 README.md | 100 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 100 insertions(+)
 create mode 100644 README.md

diff --git a/README.md b/README.md
new file mode 100644
index 0000000..86b5b11
--- /dev/null
+++ b/README.md
@@ -0,0 +1,100 @@
+# react-toggle-slider
+
+A highly-customizable React toggle slider component.
+
+## 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 | 
+| `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`) | 
+| `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>
+    );
+}
+
+```