Add custom buttons to rows according to value type

[n1c0de]

This feature adds custom buttons to each row in the JSON viewer, depending on the value type of the row (e.g., string, number, object, etc.).

The feature was previously suggested by @chad-autry in this issue : mac-s-g/react-json-view#354.

Summary of changes:

• Custom buttons are rendered for each row based on its value type
• Developers can provide their own button components via a new prop
• Includes tests

This enhancement allows for more interactive and actions between an application and this module.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
react-json-view	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 27, 2025 3:27pm

[Kikobeats]

The version will incremented before merging the PR.

Pleae don't increment the version in the PR!

[n1c0de]

You're right, it comes from the git flow I use in my fork. I will solve it.

[Kikobeats]

Can you add a brief explanation of what is the PR doing? 🙏

[n1c0de]

Can you add a brief explanation of what is the PR doing? 🙏

Yes, sorry, I missed time yesterday but it was planned. Now it's done! 😄

[Kikobeats]

Okay, now I see what you want to ship, thanks!

you are repeating the same button multiple times to make it available for more than one token – that's telling us the interface for that feature is not the best.

What do you think about something more like this?

import JsonViewer, { defaultButtons } from 'react-json-view'

<JsonViewer
  buttons={[
    ...defaultButtons, // it could be also possible to pick individual buttons
    {
      button: () => <PrintButton onClick={(element) => { console.log(JSON.stringify(element, null, 4)) }} />,
      scope: ['boolean', 'string'],
    }  
  ]}
/>