Skip to content

Add custom buttons to rows according to value type #79

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 5 commits into
base: master
Choose a base branch
from

Conversation

n1c0de
Copy link
Contributor

@n1c0de n1c0de commented May 26, 2025

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.

Copy link

vercel bot commented May 26, 2025

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

package.json Outdated
@@ -2,7 +2,7 @@
"name": "@microlink/react-json-view",
"description": "Interactive react component for displaying javascript arrays and JSON objects.",
"homepage": "https://github.com/microlinkhq/react-json-view",
"version": "1.26.2",
"version": "1.26.3",
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The version will incremented before merging the PR.

Pleae don't increment the version in the PR!

Copy link
Contributor Author

@n1c0de n1c0de May 27, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@Kikobeats
Copy link
Member

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

@n1c0de
Copy link
Contributor Author

n1c0de commented May 27, 2025

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
Copy link
Member

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'],
    }  
  ]}
/>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants