Questions tagged [react-flow]
The react-flow tag has no usage guidance.
17
questions
0
votes
0
answers
23
views
How to show tooltip popup on hover of Child Node in react-flow?
I am using react-flow for generating the topology in my application. I want to show the tooltip popup on the hover of the child node to show the details of the node.
Can anyone help me by guiding how ...
-1
votes
0
answers
26
views
How to Expand / Collapse Nodes in React Flow using React JS
Is there any way to expand/collapse upstream NODES in react-flow-renderer ?
0
votes
0
answers
10
views
How to create multiple screenshots of nodes in react flow into pdf
In a react app using react-flow-renderer, i wrote a convert to pdf function that takes the screenshot of the entire screen and converts it to pdf. But, as the nodes gets much and you have to drag the ...
0
votes
0
answers
92
views
Resizing a React Three Fiber canvas in respect to zoom
I'm being ambitious and attempting to show a React Three Fibre Canvas inside of a React Flow node.
This works, however when the view zooms, the canvas resizes inside the node
Zoomed out
Zoomed in
I'...
0
votes
1
answer
83
views
Implement force-directed graph in next js
I'm trying to create a force-directed graph for mapping the interactions between courses in an institution. Using Next JS + TypeScript for my frontend.
Have tried several attempts at charting this out ...
0
votes
0
answers
32
views
add CustomNode in Drag and Drop sidebar of ReactFlow
I created a Custom node with this article.
I want to add this in sidebar in this article.
I add this to sidebar.
import React from "react";
import "./DesignerPanel.css";
import ...
0
votes
0
answers
18
views
react-flow-renderer stretch or shrink nodes
i just started using react-flow-renderer to create a node graph. and i was wondering is it possible to manually resize nodes. i also want to stretch or shrink nodes.
i know we can create custom nodes ...
0
votes
1
answer
35
views
Asynchronous JS: Button needs to be pressed twice to execute onClick(). The onClick() triggers 2 functions but only one is executed on 1st click
I have an issue regarding an application that I am working on. I have a button that is triggering 2 function. One of them is a setState which changes the direction of a dagre graph and the other one ...
0
votes
0
answers
123
views
React-flow & dare: reactFlowInstance.fitView() fits the instance in the screen after 2nd button click. (1st only changes the direction of the graph)
I have tried different ways of implementing this beauty, but it doesn't seem to work. My problem is that when I hit the button, I want to change the layout of the graph, which happens and I am glad ...
2
votes
0
answers
189
views
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:
<ReactFlow
onLoad=...
0
votes
0
answers
12
views
How to print Node Wrapper using map parameter in Reactflowrenderer?
elements.map((el, key) =>
el.flowId === currentFlowId ? <NodeWrapper /> : null
)
Example not working.
Compiled with problems
ERROR in ./src/component/FlowChart/SingleFlow.js 10:93-104
...
0
votes
0
answers
485
views
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 ...
0
votes
0
answers
22
views
Use sessionStorage to store elements and update state when page refresh
I tried to update the state using useEffect hook and it causing some errors.The state is updated to sessionStorage whenever any changes made. I tried to use setElements in useEffect , I think this ...
0
votes
0
answers
148
views
Handles (Edge source & target) aren't created automatically with Dagre and React-Flow. (Tree visualization)
I am creating a component tree visualisation with Dagre and React-flow, and unfortunately I face some difficulties. The edges are correct, all have the right identifiers for the source and the target, ...
0
votes
0
answers
121
views
Show a tooltip on React flow edge label
I want to show a Tooltip whenever I hover over an Edge Label in React flow.
What I want is whenever we hover over any of the labels a tooltip comes up. Can anyone tell how I can achieve this?
0
votes
0
answers
72
views
Unable to update value of an element state in react-flow
I'm trying to build a flow of elements with custom nodes using react-flow.
There's a custom WelcomeNode which contains a textfield and dynamically addable ChoiceNodes.
The state doesn't update for the ...
1
vote
2
answers
4k
views
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) ...