Skip to content
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

Custom Element for properties #180

Closed
Smejia25 opened this issue Mar 5, 2025 · 3 comments · Fixed by #181
Closed

Custom Element for properties #180

Smejia25 opened this issue Mar 5, 2025 · 3 comments · Fixed by #181
Assignees
Labels
enhancement New feature or request user request Requested by user

Comments

@Smejia25
Copy link

Smejia25 commented Mar 5, 2025

Hi, More a doubt than a feature request, can you customize the property element ?, say for something like adding an icon next to the property name.

Thanks.

@CarlosNZ
Copy link
Owner

CarlosNZ commented Mar 5, 2025

In theory, you can, but it would be a bit fiddly as you'd have to pass in a replacement node for the whole property/value display, which would be annoying if all you wanted to do was insert an icon like you suggest.

I might be able add an option in the custom node definitions to pass in the original node and property element so you can choose to render it as part of a custom node. (You can already do this with "Collection" nodes, as you can render the children prop, but not so with primitive value nodes)

I'll have a think about the cleanest way to implement this without adding performance burden. Thanks for the suggestion. :)

@CarlosNZ CarlosNZ self-assigned this Mar 5, 2025
@CarlosNZ CarlosNZ added enhancement New feature or request user request Requested by user labels Mar 5, 2025
@Smejia25
Copy link
Author

Smejia25 commented Mar 5, 2025

Thanks for the swift answer, amazing library.

CarlosNZ added a commit that referenced this issue Mar 8, 2025
* Abstract KeyDisplay into single component

* Hide colon via CSS if required

* Update README.md

* Remove dupe assignation
@CarlosNZ CarlosNZ reopened this Mar 8, 2025
@CarlosNZ
Copy link
Owner

@Smejia25 just wanted to let you know that you should be able to do what you want a bit easier now, with v1.24.0

In particular, take note of the passOriginalNode prop in customNodeDefinitions and the expanded documentation for Custom Nodes in general: https://github.com/CarlosNZ/json-edit-react?tab=readme-ov-file#custom-nodes

Let me know if you need any assistance getting it working.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request user request Requested by user
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants