Retoggle - UI controls as React Hooks to control your component state from outsi...

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 .

• :tada: A wide range of toggles
• :bulb: Frictionless integration
• :art: Themeable components
• :gift: Extensible. Write your custom toggles.

:rotating_light: 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

• :memo: useLog() - Keeps track of a variable value
• useTextKnob() - Shows a text box
• :one: useNumberKnob() - Shows a number box
• :white_check_mark:️ useBooleanKnob() - Shows a check box
• useRangeKnob() - Shows a slider
• useRangesKnob() - Shows multiple sliders
• :flags: useSelectKnob() - Shows a select box
• ⚒ useObjectKnob() - Shows an object editor
• :art: useColorKnob() - Shows a color picker
• :alarm_clock: useTimemachine() - Shows a slider and tracks the state of a given variable and allows to travel back in time

:books: API Docs with live preview available here

:crystal_ball: 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
docz:build

License

MIT

Contributors

Raathigeshan

:computer: :book: :speech_balloon: :eyes: :art:

This project follows the all-contributors specification. Contributions of any kind are welcome!