UI controls as React Hooks to control your component state from outside

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.
๐จ You need React v16.7.0 to use Retoggle since it relies on Hooks. Also Hooks are a new feature proposal that lets you use state and other React features without writing a class. Theyโre currently in React v16.7.0-alpha and being discussed in an open RFC.
Available knobs
- ๐
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
An example
The value of state
will be displayed in the inspector component.
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 (
<div>
<Inspector />
</div>
);
}