UI controls as React Hooks to control your component state from outside
npm install 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.
- 📝 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
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 dependenciesRunning 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 folderDocs
-
docz:dev will start the docz development server
- docz:build` will build the docsMIT