react-tweakpane icon indicating copy to clipboard operation
react-tweakpane copied to clipboard

Subject: Suggestion to Provide Tweakpane as a Component

Open gaki2 opened this issue 8 months ago • 1 comments

Hello, I was impressed by how you made Tweakpane available as a hook.

I wanted to suggest providing Tweakpane as a React component as well.

If Tweakpane could be used as a component, it would allow us to render Panes and Folders dynamically and write code in a more declarative way.

I believe that if Tweakpane could be used in a component form, it would make it even more convenient and versatile for users in various situations.

This is Example code.

const INITIAL_VALUE = {
     name: "tweakPane"
     count: 10,
}

const Component = () => {
   return (
         <>
            <Pane initialValue={INITIAL_VALUE} title={'My Pane'}>
                  <Binding name="name" onChange={callback} />
                  <Folder initialValue={INITIAL_VALUE}>
                         <FolderBinding name="counter" onChange={callback} />  
                   </Folder>
                  <PaneButton title="counter" label="click" onClick={callback} />
             </Pane>
             <TestComponent />
         </>
   ) 
} 

And Here’s some sample code I’ve drafted as an initial attempt. https://github.com/gaki2/ui_craft/blob/main/packages/core/debug/src/react/Pane.tsx

P.S. I am willing to take responsibility for carrying out this task. Thank you for creating such a great library!

gaki2 avatar May 04 '25 00:05 gaki2

that looks like a great idea. I also had been using this package a lot recently, I did some updates here: https://github.com/lazarusA/react-tweakpane/tree/la/plugins (which I'm using now). I did open a PR with some of those changes here https://github.com/MelonCode/react-tweakpane/pull/4, but because I could wait for a merge I continue working on my branch as well as using that instead ("@lazarusa/react-tweakpane") of this great original package. If things keep being stall here, I'm more than happy to incorporate your suggestions and continue developing this package in my fork/branch.

lazarusA avatar May 13 '25 20:05 lazarusA