/ Toggle

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

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>
  );
}

GitHub