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.

[dbismut]

Hi @Pocket-titan we got pumped and decided to rewrite something from scratch, that fits React and supports your idea out of the box with no major hassle.

useTweaks({ color: 1, number: 4 }, folder("sub", { a: 2, b: 3 }, folder("sub2", { c: 4 })))

You’ll also be able to do:

useTweaks("sub.sub2", { c: 4 })

And get the value. Of course the value will only be initialized once (by the first hooks that gets called).

We’ll try to release something in alpha as soon as it’s usable.

PS: the idea is to store the data structure but flatten. So that the store looks like:

{
  "valueKey": value
  "folder.subfolder.valueKey": value
  // ...
}

[gsimone]

If anybody comes across this and wants to try alphas of the new version, drop me a DM on twitter or an email!