Questions tagged [react-flow]
90 questions
5
votes
3 answers
Custom nodes in react-flow; saving additional data to a node after it has been created
This is my first introduction to react-flow. I am looking to create a custom node where after creation, the user can enter information in the node and save/display it. From the react-flow documentation on custom nodes, they have a similar example…
Peek0
- 173
- 2
- 9
4
votes
4 answers
React-Flow: Can you pass props to a custom node in React-Flow?
I am using React-Flow in order to visualise a tree hierarchy of components in React. And whenever you create a custom node in React-Flow, you use it in the tree like that:
botana_dev
- 418
- 4
- 16
3
votes
2 answers
Importing reactflow v11 causes error "module parse failed: unexpected token"
When I install reactflow (v11.2.0), I get the following error when I just import anything from that library:
./node_modules/@reactflow/minimap/dist/esm/index.js 100:27
Module parse failed: Unexpected token (100:27)
You may need an appropriate loader…
Phrixus
- 1,209
- 2
- 19
- 36
3
votes
0 answers
React Flow - one nodes drags other nodes
After upgrading to version 10, I see that sometimes when I move one node, it drags several other nodes with it.
My Code ( nothing special):
const onNodesChange = useCallback(
(changes) => {
if (nodesToShowRef.current &&…
neomib
- 3,503
- 4
- 17
- 27
3
votes
4 answers
How to delete a element in react-flow while clicking on delete button
i am using react-flow-renderer in my project. and we have a requirement that we want to delete the element by clicking on it.
I had try the following code.
const onElementsRemove = (elementsToRemove) =>
setElements((els) =>…
Dharmendra Soni
- 145
- 1
- 4
- 9
2
votes
1 answer
How can I prevent nodes from being added outside the view area in React Flow?
I built a demo application using react flow. When I build a huge graph or when I zoom in and then add a node, I want the node to the visible and in the centre of the page, instead, it is added outside the view area. How can I fix this?
When I add a…
Fenil
- 23
- 2
2
votes
0 answers
react flow in react native
I have a project that need to create a Process modelling on react native like
I've researched some libs but still cannot to find any solution. Anyone know some good library run on react native? please help to let me know, thank in advance!
Amina_B
- 31
- 1
2
votes
0 answers
Integrting Redux with ReactFlow-State not updating properly
I am trying to integrate redux with reactflow library. When I drag and drop a node on the canvas, user gets a modal where he can enter the node details. After submitting the details, the data attribute of the node object gets updated and the node…
Muneeb Ahmed
- 23
- 4
2
votes
1 answer
Anchor a Material Ui Popper component on a react-flow custom edge label
Inspired by this example in the react-flow docs, I created my own version which opens a Material Ui Popper once the edge is selected.
My issue is that while the popper stays perfectly anchored to the edge's button while I'm dragging nodes around,…
itaydafna
- 1,968
- 1
- 13
- 26
2
votes
0 answers
ReactFlow Graph doesn't re-render when updated
I put a ReactFlow component to my Angular project, that shows the graph perfectly when initializing the component.
Whenever I update the graph e.g. by changing the direction or updating the nodes, the "onLayout" method is called, however the graph…
leolove
- 21
- 2
2
votes
1 answer
Is there way put info buttons for each node in reactflow
I want to add info button side of each node component. is this possible?
example, on picture you can think yellow marks which are buttons I want.
here return part of js code:
'''
{" "}
{display && (
altay bayrak
- 31
- 2
2
votes
0 answers
React-flow: Pass data only when connected
I'm a total React-flow noob and this question might be silly, but I can't quite seem to grasp the concepts I need to utilize.
I'm trying to make an app where the user can add custom color nodes and then also add text nodes which, when connected show…
jansmolders86
- 5,449
- 8
- 37
- 51
2
votes
0 answers
Layouting bug in react-flow-renderer v10
I just migrated to react-flow-renderer version 10 about 5 hours back (it launched around 10 hours ago). I am trying to arrange nodes on a graph with the help of dagre library for layouting & Vite js as a build tool
However, I keep getting thrown the…
Ankit Sanghvi
- 467
- 5
- 18
1
vote
1 answer
Reactflow and Next.js with app router - nodes and edges not rendered
I am trying the basic example using "reactflow": "^11.8.3" and "next": "13.4.19". I am using the app router of next.js. The nodes and edges are not rendered. The relevant html elements are not created.
Adding code for…
Bhargav Yvsb
- 31
- 4
1
vote
1 answer
markerEnd not taking marker configs on the BaseEdge component
Hi there I'm trying to set the markerEnd properties (width, height, color, type) on a BaseEdge but it says it only takes a string for the markerEnd property. According to the docs (found here) it says that the markerEnd and markerStart take a type…
Zurka Wolford
- 11
- 2