raathigesh / retoggle Goto Github PK

View Code? Open in Web Editor NEW

1.4K 10.0 27.0 1.04 MB

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

Home Page: https://retoggle.netlify.com/

License: MIT License

JavaScript 7.04% TypeScript 92.96%

retoggle's Introduction

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

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

retoggle's People

Contributors

Stargazers

Watchers

retoggle's Issues

Add ability to move inspector around by drag and drop

It's quite hard to work with when you need to collapse and uncollapse this thing all the time if you have some UI on the right side that you want to interact with.

Also, make its z-index 999999999999 or something like that so it overlaps all possible UI in any scenario :)

Will this generate component code?

Are there any plans to be able to generate code? Would be cool to visually tweak a component and then grab and use that code in some way.

Update peer dependencies to use 16.8 >

Please update peer dependencies to use the release version.

How to use this for multiple components?

Thank you for this project, I absolutely love the simplicity of hook-based knobs! I would like to be able to use this to debug different components simultaneously. I tried first by naively attaching a non-portal Inspector to each component I want to inspect but then found that hooks begin to mix between them.

Is this usage supported, in the roadmap or intended at all?

Generate type definitions for TypeScript

Generate type definitions for TypeScript and not only JS bundle. You can use tsc for that with option emitDeclarationOnly and don't forget to add typings url to the package.json.

doesn't deploy with CRA2 ?

create-react-app test-project
cd test-project
yarn add retoggle

then import retoggle somewhere in the app

yarn build
serve -s build

it return an error:

Uncaught TypeError: Super expression must either be null or a function, not undefined
    at index.js:6135
    at index.js:6134
    at Object.<anonymous> (index.js:6124)
    at t (index.js:5602)
    at Object.<anonymous> (index.js:8467)
    at t (index.js:5602)
    at Object.<anonymous> (index.js:7206)
    at t (index.js:5602)
    at Object.<anonymous> (index.js:6821)
    at t (index.js:5602)

these are the two lines i added to a new CRA2 template:

import React from "react";
import { Inspector } from "retoggle";
//...
return (...
<Inspector usePortal={true} />
)
//...

Tests for this repository

Tests

Does anybody know if there are testings under development in this repo?

Could use a link to the repository from the docs

Just found this project from React Status and clicked through to the debuggable.io site. But, from there, I didn't see any way to get to this github repo. Oblivious me, I missed the link to the repo from the React Status newsletter. So I googled for "github retoggle" to get here. But, a link from the published docs would be nice too!

removeKnob does not work

Changed app.tsx like this:

export default function App() {
    const [ useIcon ] = useBooleanKnob('Use Icon', true)

    return useIcon ? <Icon /> : <div>123abc</div>
}

then switch 'Use Icon' to false.

Component Icon was unmounted, but knobs were still there .

Get missing keys warning from React

I get

Warning: Each child in an array or iterator should have a unique "key" prop.

for each knob added to the inspector. Is this a known issue?

WebpackError: ReferenceError: window is not defined

but you can easily test it yourself with:

// fail-retoggle.js
require('retoggle')

node fail-retoggle.js

And get

ReferenceError: window is not defined

I tried searching for references to window in this project but could not find any which confuses me. Anyone else bumping into this problem?