Customize what is going to be copied / Copy everything together

[italodeandra]

Hi team,

First of all, thanks for the library. I'm already a "helper" of Zustand and Valtio, so I really look forward to everything you guys make.

Leva looks really promising, and I'm currently using it on a documentation project I have. So for my use case, instead of copy the JSON of the object, I would like to customize is to return a JSX.

leva/packages/leva/src/components/UI/Label.tsx

Line 57 in 57c5188

await navigator.clipboard.writeText(JSON.stringify({ [key]: value ?? '' }))

I already understand how it works, but first I would like to know if you are open for PR so for that I'll first share my thoughts.

---

Customize what is going to be copied

The first feature I want to implement is to pass a function to the input called copy that will receive the same object that is transformed to JSON and what the function returns will be what is copied to the clipboard.

Copy everything together

Add the copy button on the left of the filter. If you click it will copy the entire object that is configured (except the disabled). And if you pass the same function copy to the Leva component, it will have the same behavior as the previous functionality.

I'll also hide it if hideCopyButton is true.

---

Let me know what you guys think.

[italodeandra]

I already started a POC with both implementations. You can check it on my fork:

italodeandra@4a4c23e

[dbismut]

@italodeandra Oh nice! I like the idea. Do you mind creating a PR (even as a draft), so that we can benefit from the CI?

[italodeandra]

Hey @dbismut,

Just did, you can check it here #193. I hope I didn't break anything, but let me know what needs to be changed.