Example on how to render custom nodes
See original GitHub issueFirst of all, thanks for the great work on this library!
Is your feature request related to a problem? Please describe. I would like to render custom nodes (my own React component, which is just a simple rectangle with some basic styles). I can’t use the default rendering of the nodes because my text gets cut off, and I’d like to render them as rectangles instead of circles (screenshot attached below)
I see in #36 that I could use renderNode
or renderNodeText
. However, it’s not clear what the contract for these 2 props are, and how I could use it to render my own component.
It would be great if you could provide a sample code on how to render nodes using our custom React components.Thanks!
Issue Analytics
- State:
- Created 4 years ago
- Reactions:1
- Comments:5 (1 by maintainers)
Top Results From Across the Web
Custom Nodes Guide - React Flow
Within custom nodes you can render anything you want. You can define multiple source and target handles and render form inputs or charts...
Read more >sigma-example-custom-rendering - CodeSandbox
* This example shows how to use different programs to render nodes. * This works in two steps: * 1. You must declare...
Read more >Custom Nodes - React Diagrams - GitBook
In the example below, it uses a customized data model DiamondNodeModel to render DiamondNodeWidget , and both of them are being created in...
Read more >Redshift Custom Nodes & Presets Tutorial - YouTube
In this video you're gonna find out how to create Custom nodes & Presets in Cinema 4D and Redshift render, Octane-ish texture transform...
Read more >Manage Custom Nodes with OIV 10
During the traversal, a set of commands is setup that represents an abstraction of the rendering execution for the render engine. Finally, commands...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
You can checkout the source code for the Node and Node Text components. They should give you a good indication of what to do…
Example for
renderNodeText
: node-text.jsExample for
renderNode
: node.jsAnd in case you were curios… Here’s where the function you pass through gets executed:
Were you able to figure out what was happening @EfstathiadisD?
Also, which one of the solutions worked? Can I use a custom <div/> or <Component/> as a node?