retoggle

Retoggle is a collection of React hooks which provides UI toggles to manipulate your component state from outside. Like Storybook Knobs. This library is inspired by ideas from Dan Abramov.

- 🎉 A wide range of toggles
- 💡 Frictionless integration
- 🎨 Themeable components
- 🎁 Extensible. Write your custom toggles.

$3

- 📝 useLog() - Keeps track of a variable value
- 🅰 useTextKnob() - Shows a text box
- 1️⃣ useNumberKnob() - Shows a number box
- ✅️ useBooleanKnob() - Shows a check box
- 🎚 useRangeKnob() - Shows a slider
- 🎛 useRangesKnob() - Shows multiple sliders
- 🎏 useSelectKnob() - Shows a select box
- ⚒ useObjectKnob() - Shows an object editor
- 🎨 useColorKnob() - Shows a color picker
- ⏰ useTimemachine() - Shows a slider and tracks the state of a given variable and allows to travel back in time

#### 📚 API Docs with live preview available here

#### 🔮 Codesandbox Demo

$3

The value of state will be displayed in the inspector component.

``javascript
import React, { useState } from "react";
import { Inspector, useLog } from "retoggle";

export default function Demo() {
const [state, setState] = useState({ value: 5 });

// logs your state to inspector
useLog("My state", state);

return (



);
}
`

$3

Preparing dev environment

- yarn install to install dev dependencies

Running and building the library

- yarn start will start the dev server and expose the sample app
- yarn build will output the build artifact to ./lib folder

Docs

- docz:dev will start the docz development server
- docz:build` will build the docs

$3

MIT