๐ŸŽจ UI controls as React Hooks to control your component state from outside
Switch branches/tags
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
config React as external Nov 12, 2018
docs Update index.mdx Dec 11, 2018
src Docs changes Nov 12, 2018
.babelrc Remove hot loader Nov 5, 2018
.gitignore Add docz Nov 8, 2018
.npmignore Update Nov 12, 2018
.travis.yml Test and few docs Nov 6, 2018
LICENSE Initial commit Nov 4, 2018
README.md fixed development Nov 13, 2018
doczrc.js Update doczrc.js Dec 5, 2018
jest.config.js Fix jest config Nov 6, 2018
package.json 0.2.0 Nov 12, 2018
react-hooks.d.ts Initial test setup Nov 6, 2018
tsconfig.json Initial test setup Nov 6, 2018
yarn.lock Update test and package.json Nov 11, 2018

README.md




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

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

Contributors


Raathigeshan

๐Ÿ’ป ๐Ÿ“– ๐Ÿ’ฌ ๐Ÿ‘€ ๐Ÿค” ๐ŸŽจ

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