tweakpane / use-tweaks

🎛️ Tweak React components with Tweakpane

Use Tweakpane in React apps

Try it here on Codesandbox

npm install tweakpane use-tweaks

Basic example

import { useTweaks } from "use-tweaks"

function MyComponent() {
  const { speed, factor } = useTweaks({
    speed: 1,
    factor: { value: 1, min: 10, max: 100 },
  });

  return (
    <div>
      {speed} * {factor}
    </div>
  );
}

Misc

Folders

You can add a top-level folder by passing the name as first argument of the hook:

import { useTweaks } from "use-tweaks"

const { speed, factor } = useTweaks("My title!", { speed: 1, factor: 1 })

You can also nest folders by using the makeFolder helper:

import { useTweaks, makeFolder } from "use-tweaks"

const { speed, factor } = useTweaks("My Title!", {
  speed: 1,
  ...makeFolder(
    "Advanced",
    {
      factor: 1,
    },
    false
  ), // pass false to make the folder collapsed by default
})

Buttons

Use the makeButton helper to create and add a button

import { useTweaks, makeButton } from "use-tweaks"

const { speed, factor } = useTweaks({
  speed: 1,
  factor: { value: 1, min: 10, max: 100 },
  ...makeButton("Log!", () => console.log("Hello World!"))
})

Separator

Use the makeSeparator helper to add a separator

import { useTweaks, makeSeparator } from "use-tweaks"

const { speed, factor } = useTweaks({
  speed: 1,
  ...makeSeparator(),
  factor: { value: 1, min: 10, max: 100 },
})

License

This project is open source and available under the MIT License

use-tweaks's Issues

Cannot start the pane closed

Passing { expanded: false } as a third argument (the option argument) does not work.

Reproducible here:
https://codesandbox.io/s/use-tweaks-example-forked-j22p4?file=/src/App.js

Current Result

Expected Result

It should forward correctly the options to tweakpane:
https://cocopon.github.io/tweakpane/api/classes/rootapi.html#expanded

🐛 4/24/2023

Next.js 13.3.0

• I cant use parameter name = "title" at useTweaks(name, schema, settings)
  
  

• Can you consider replacing useLayoutEffect with useEffect
  

use-tweaks 0.3.1

• Missing icon checkbox :v
  

Test with fast-refresh

Probably breaks right now

Look into how to remove inputs from the pane

Need to open an issue on the original repo

Multiple hooks instances

Right now multiple hooks create multiple panes, consider making this optional

Uncaught TypeError: import_tweakpane.default is not a constructor

This library throws an uncaught exception as in the title. The symbol Tweakpane is undefined when attempting to call this constructor. I looked a tweakpane module and it doesn't seem to export a default. I checked to make sure the peerDeps match. I reproduced this issue in a couple TS projects. I'm not providing a reproduction because I'm not sure if this is maintained given there are several stale pending PRs . Intent here is to warn other developers.

Special treatment for arrays

Right now tweakpane makes selects from an object like

{
   options: { a: 0, b: 0, c: 0 }
}

But I would like an api like this for useTweaks for simple cases

useTweaks({
   option: ["a", "b", "c"]
})

that would convert it to tweakpane's format.

Keep in mind that the value set by tweakpane is the key, not the value

Tweaks are lost when unmounting component

Since state is stored in the hook, tweaks are lost when unmounting the component.

To reproduce:

• make a component that can be mounted/unmounted
• add a tweak in the component
• change some values
• cause an unmount
• remount the component
• values will be back to default

Monitors

API for monitors, maybe a fn that hides constants or something

const  { mouseMonitor, x, y  } = useTweaks({ mouseMonitor: makeMonitor('2d'), x: 1, y: 1 })

// alt
const  { mouseMonitor, x, y  } = useTweaks({ mouseMonitor: { type: "MONITOR" }, x: 1, y: 1 })

useFrame(() => {
   mouseMonitor.set(mouse.x)

   // alt
  mouseMonitor(mouse.x)
})
 

Folders

Folders can be made with a context provider

<Pane>
   <Input name="outer" />
  <Folder title={title}>
      <Input name="test" />
   </Folder>
</Pane>

Here both Pane and Folder are folderContext.Providers that pass an instance of tweakpane or a pane.addFolder({ title })

function Input() {
  const { parent } = useContext(foldersContext);
  

   useEffect(() => { parent.addInput(...) }

}

Fix types

Internal types are placeholders
Types created by the hook are up in the air, look into how to do it

Broken Schema types

Using typescript 4.4.2, use-tweaks 0.3.1, and tweakpane 3.1.0:

Return type for useTweaks is {}, regardless of whether I pass in a type for the Schema generic or not. Am I missing something?

Create a license file

Is your feature request related to a problem? Please describe.
Create a license file

Describe the solution you'd like
Use MIT License

Describe alternatives you've considered
NONE

Additional context
NONE

Find a way to set initial values without ugly stuff

Initial values are hard to set with the current architecture

Init:

<Input name="test" value={0} />

Consumer:

const [test] = useGUI('test') // this will be undefined until the component executes its useLayoutEffect

codesandbox seems to be broken

url for this repo's sandbox link

https://codesandbox.io/s/github/gsimone/use-tweaks

Separators

Come up with an API for separators

Multiple panes on a page

Hi, I'm trying to add multiple tweak panes on a page, independent of each other, just separate demos stacked.

I figured I can pass a container via settings and this attaches the pane to a custom element, but what seems to happen is after the first instance, all tweak-panes are mounted to the same container regardless of their respective hook configuration.

I'm not sure if that's a bug, a feature or if I'm missing something, but I would certainly appreciate any help.

You can see a demo of the issue here:
https://scramble-git-demos.a7sc11u.vercel.app/

And here's my repo (main.jsx and typewriter.jsx) are the layouts that use useTweaks
https://github.com/a7sc11u/scramble-site/blob/demos/src/

Thanks in advance!

P.S. Thank you for putting this library together, I love it!

Keep state & order on HMR/FR

Plan:

We can use schema/name as keys, creating an out-of-react state:

state[generateKey(name,schema)] = value

This object is used at reload to

1. regenerate panes in original order
2. preserve state on unmounting/reloading

Tweaks with identical settings would be ambiguos, we need to catch this and warn + add documentation

`useTweaks` type not working

Description

useTweaks return type is always any.

Example

const tweaks = useTweaks({ first: 10 }) // has type any

https://codesandbox.io/s/usetweaks-type-issue-1k2lo

Buttons

Buttons are a special case since they don't change values, they are just buttons.

Consider special treatment

const { button } = useTweaks({ button: makeButton(() => console.log("pushed")) })

[dev] linting & prettier not working

💡 Default monitors

https://cocopon.github.io/tweakpane/monitor.html

example: FPS

Merge state with initial values at construction

How to use custom container?

Hi there,

Is there any way to use the container option like in the standard tweakpane package?

directories are recreated on refresh since they use ids

Return type error with useTweaks

When using the useTweaks hook, I'm getting an error about the return types. The return type looks to be an object with a single key that is an empty string?

const {
    numCirclesPerGroup,
    circleGap,
    innerCircleRadius,
    numGroups,
  } = useTweaks({
    numCirclesPerGroup: { value: 12, min: 1, max: 40, step: 1 },
    circleGap: { value: 2, min: 0, max: 100, step: 1 },
    innerCircleRadius: { value: 20, min: 1, max: 100, step: 1 },
    numGroups: { value: 6, min: 2, max: 90, step: 1 },
  })
// Property 'innerCircleRadius' does not exist on type '{ "": { numCirclesPerGroup: ....

See this sandbox https://codesandbox.io/s/jovial-lamport-8c4u3?file=/src/App.tsx

step option?

I'm noticing the step option doesn't seem to be working. Are you planning to support this in the future?

Fields don't get disposed properly when outside directories

To reproduce:

• make a component that can be mounted/unmounted
• add a tweak in the component
• if the tweak is in a directory, it will be disposed when unmounting, otherwise it will be re-created

Refresh Pane

Hello everybody!

I am using your cool library and trying to update values in the GUI. Tweakpane has the function pane.refresh() (Tweakpane API). Is there a way to trigger this in use-tweaks?

Thanks a lot!
Max

Make sure state is only being updated for relevant data, not any

Unmounting a component with all useTweaks properties results in an empty Tweaks Panel instead of a hidden Panel

By unmounting a component that does contain all useTweaks properties the properties inside the TweaksPanel disappear as intended but the Tweaks Panel remains as a small stripe on the top. Images:

Convert repo to TS

Handling multiple instances of a component with tweaks

Hey! Love the library :)

I have multiple instances of a component with a useTweaks call, say:

const Button = ({ text }: { text: string }) => {
  const { color } = useTweaks("Buttons", { color: "blue" });

  return <button style={{ backgroundColor: color }}> {text} </button>
}

However, every single instance Button will add its own color setting in the tweakpane, whereas my intent was to have them all share the same value.
My question: should I just hoist the useTweaks call up one level and pass the tweaked value down as a prop (feels kind of meh)? Or is there a nicer solution to this? I tried passing the same presetKey but they still have different tweakpane inputs.
Here's a sandbox demonstrating the "issue": https://codesandbox.io/s/gracious-bas-22vg2?file=/src/App.tsx.

i can't initiate tweakpane

Hi,

i'm encoutring an issue when i install Tweakpane and try to use it :

const tweakpane = require('tweakpane');

`const createPane = () => {
const pane = new tweakpane.Pane();
}

createPane();`

i have this error :

C:\wamp64\www\cours code créatif\skteches\node_modules\tweakpane\dist\tweakpane.js:7791
export { BladeApi, ButtonApi, FolderApi, ListBladeApi, ListInputBindingApi, Pane, Semver, SeparatorBladeApi, SliderBladeApi, SliderInputBindingApi, TabApi, TabPageApi, TextBladeApi, TpChangeEvent, VERSION };
^
ParseError: 'import' and 'export' may appear only with 'sourceType: module'

anybody can help me please ?

`tweakpane` version ^3.0 introduces breaking changes

tweakpane recently upgraded to version 3, which introduced breaking changes:

https://github.com/cocopon/tweakpane/releases/tag/3.0.0

Running use-tweaks gives the following error:

Changes including named exports, types changes, and refactored routes in types/api/. I will try and push a PR if I got the time.

Get default tweak value from { min } when available - and other sensible defaults