retoggle

???? UI controls as React Hooks to control your component state from outside https://retoggle.debuggable.io/

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

Subscribe to the Newsletter

Get our latest news,tutorials,guides,tips & deals delivered to your inbox.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

shares