Skip to content

๐ŸŽจ UI controls as React Hooks to control your component state from outside

License

Notifications You must be signed in to change notification settings

Raathigesh/retoggle

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation




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

๐Ÿ”ฎ 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>
  );
}

Contribute

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 app
  • yarn build will output the build artifact to ./lib folder

Docs

  • docz:dev will start the docz development server
  • docz:build will build the docs

License

MIT