Raathigesh/retoggle

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


repo name	Raathigesh/retoggle
repo link	https://github.com/Raathigesh/retoggle
homepage	https://retoggle.netlify.com/
language	TypeScript
size (curr.)	1054 kB
stars (curr.)	1349
created	2018-11-04
license	MIT License

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.

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