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
๐ฎ Codesandbox Demo
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>
);
}
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 appyarn build
will output the build artifact to./lib
folder
Docs
docz:dev
will start the docz development serverdocz:build
will build the docs
MIT