Questions tagged [react-flow]

The tag has no usage guidance.

Filter by
Sorted by
Tagged with
0 votes
0 answers
35 views

Setting up ReactFlow v11 with webpack

I am trying to use ReactFlow version 11 in my existing project. I am using external react scripts in the project. I am using React 17 with react-scripts@5.0.0 and my webpack looks like this : module....
  • 392
1 vote
0 answers
36 views

react-flow-renderer and react-beautiful-dnd: zoom issue that occurs when the zoom level is less than 100%

"I am using React Flow Renderer and React Beautiful Dnd to drag elements. When I drag an element, it is directly under the mouse cursor when the zoom level is 100%. However, when I decrease the ...
0 votes
0 answers
75 views

Preventing Overlapping of Nodes in React Flow When Nodes are Dragged and Resized

I need to prevent nodes from overlapping when their size changes. Is there any way to automatically update the positions of the nodes when their size changes so that they don't overlap with each other?...
2 votes
0 answers
58 views

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? ...
  • 31
1 vote
1 answer
73 views

Reactflow - Background displaying over nodes

Using reactflow, on a simple graph I am trying to use the <Background/> Reactflow component as follows : import React, { useCallback, useState } from 'react'; import ReactFlow, { addEdge, ...
  • 293
1 vote
1 answer
51 views

How do I change the position of the label in the Nodes of ReactFlow?

I am trying to change the position of the label of reactflow node from Center to the left side and rotate it 90deg, for example something like this. can anyone tell me how I can achive this I tried ...
  • 25
1 vote
0 answers
18 views

Process Modeling in React Native

I have a project that need to create a Process modelling on react native like this. enter image description here I've researched some libs but still cannot to find any solution. Anyone know some good ...
  • 31
0 votes
0 answers
15 views

I need my node content to increase proportionally to my NodeResizer

I'm trying to make my node increase in size proportionally, but it happens that it grows misaligned and I haven't found a solution for the same. Gif with the problem Hope there is some way to do this....
0 votes
0 answers
11 views

Unable to start webpack server after update

I tried to install reactflow, in order to support that I had to update the react version, which I did, then somehow the web pack got updated, and the npm start script stopped working anymore. npm ...
  • 9
0 votes
0 answers
44 views

Plotly - Dash @app.callback does not re-render Dash elements inside custom component unless re-render is triggered somehow

Inside usage.py I try to update graph-tooltip: @app.callback( Output("grid-value", "children"), Input("live-graph", "hoverData"), ) def display_hover(hoverData):...
  • 347
0 votes
0 answers
104 views

How to keep a node selected when clicking on pane - React flow

I'm developing a website when you can select multiple nodes to perform certain operations. I'd like to keep all the nodes I have clicked on "selected" i.e with the border colored. In fact, ...
2 votes
0 answers
69 views

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 ...
2 votes
1 answer
149 views

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 ...
  • 1,878
0 votes
0 answers
74 views

How to update Drag and drop Nodes in React-flow Library

When I am click on Input node that time Node drag Successfully drop.. Click on Node open input box and edit the node Name
1 vote
1 answer
79 views

Dynamically creating nodes from JSON does not work after initial save

I am new to react, trying to dynamically create nodes using ReactFlow based off of a JSON. Using the code below, I will save my index.tsx and push a button which calls onAdd function, and it will work ...
0 votes
1 answer
243 views

How can I reset the viewport of my React-Flow project to fitView, without clicking the Controls fitView?

I'm working on a React-Flow project. I'm changing the layout of the nodes and edges with a button and I want the last thing to happen to be resetting the viewport to be centered (so just fitView). How ...
0 votes
0 answers
256 views

Saving additional data to a custom react-flow node

I want to save additional data for the custom node, I used this article for creating a custom node using additional data. Custom node: import { useState } from 'react'; import { Handle, Position } ...
  • 4,635
1 vote
0 answers
265 views

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 ...
  • 11
0 votes
0 answers
320 views

d3 Radial Tree and React-Flow?

Quite new with d3 but have been stuck on this for several weeks and figured I'd ask here I've been trying to create a radial/flare tree using React-Flow but I'm having a really hard time with ...
0 votes
1 answer
33 views

Is there a way to enforce hierarchical validation with reactflow nodes?

I am using reactflow to create a system of sequences, each with their own "levels" I need to only allow sequences to connect to others of a lower level than their own. For example, A level 5 ...
0 votes
1 answer
363 views

React flow: custom group node example

I'm studying the React Flow library documentation and trying to figure out if there is a way to create my own node that will be a group (I want to implement custom title with styles for node before ...
0 votes
1 answer
184 views

how to reposition nodes when they are intersecting with each other in react flow

When a node1 is dragged over node2 in react-flow, then node2 is overlapping with node1. But I want it to be shifted right so that there will be no overlapping between nodes The expected result is that ...
0 votes
1 answer
443 views

How to create a draggable node when click on a button in react flow - typescript?

i am working on react flow using typescript, for react flow i am using ractflow and react-flow-renderer packages. In the start i have one node and a button, what i want is: when i click on the button =...
0 votes
1 answer
97 views

Getting react/jsx-runtime error whiile running reactflow v11 version

failedModules=sg-lineage-ui/js/sg-lineage-ui:Script error for "react/jsx-runtime" Already tried adding latest version of following things to package.json, which also didn't work: // ... ...
0 votes
0 answers
219 views

Error: Couldn't find a navigation context. Have you wrapped your app with 'NavigationContainer'?

I'm getting this error on every render. The stack trace below started with a mouse §click. The problem is I have no clue how to approach this. What I gather from this trace is: It seems to happen ...
  • 2,551
2 votes
2 answers
694 views

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 ...
  • 1,157
0 votes
0 answers
25 views

the edges not aligned with nodes in react flow

i have a react flow app with nextjs this image explains everything this is I get the edges(delivery lines) not aligned with nodes in react flow my code: import ReactFlow from "react-flow-renderer"...
  • 74
0 votes
0 answers
55 views

How to layout nodes using geo coordinates in reactflow which are close to each other

I'm trying to project nodes using the d3-geo and reactflow libraries. The nodes xPos and yPos(x and y positions) are longitudes and latitudes. And I use the below approach to map those positions to ...
0 votes
0 answers
220 views

Sun editor adds <br> tag at the end of text in React Js

I am using sun editor in my react app, when the user enters the text into the editor the tag gets added automatically at the end of the string. <p>dasdsad</p> <p>dasdsad dsadsa <...
0 votes
0 answers
31 views

Keep React Flow Renderer component loaded when not rendering

I'm building an application with different tabs, each one rendering a different component. One of those components is a React Flow component, and each time that I open the tab of that component, the ...
2 votes
1 answer
169 views

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: ''' {" "} {...
0 votes
0 answers
166 views

Exporting React-Flow-Renderer Nodes orderBy their position in canvar

I have nodes and edges in two different state objects ordered by when they are added in canvas in React-Flow-Renderer. now I want to get JSON of nodes sorted by their position (Top-Left to bottom ...
0 votes
0 answers
414 views

How to implement expand and collapse functionality in reactflow in react application

I am trying to implement expand and collapse child nodes in react-flow in a react application. I have tried to use the hidden property of nodes and edges to hide. const hide = (hidden: boolean) => ...
0 votes
0 answers
24 views

to transfer data from left node to right onConnection

to transfer data I want to transfer data from left node to right in same input box where edge is connected. Can anybody help about it ?
0 votes
0 answers
58 views

React-flow node with CKEditor allow scrolling of ckeditor content

I have a node with a ckeditor, but when I try to scroll the content it zooms the page. I can disable that behavior of zooming on scroll, but it still seems to be preventing the ckeditor from scrolling....
0 votes
0 answers
62 views

EdgeClick on reactflow's subflow doesn't trigger

I have my nodes like this const nodes = [ { id: 'A', type: 'group', data: { label: null }, position: { x: 0, y: 0 }, style: { width: 170, height: 140, }, }, { ...
0 votes
1 answer
674 views

React flow renderer and moveable element position and scale not staying the same

Hi I'm facing some difficulties utilizing react-moveable with react-flow-renderer to make my elements both movable and scalable. At my current place, I am able to scale and rotate elements but after ...
  • 3
0 votes
0 answers
18 views

can i map handles according to input fields positioned adjacent in left and right side of Node?

for the data flow from one node to another in my prototype, all handles are on the left and right side of node. Numbers of these handles can be vary according to input fields .so i have to map these ...
0 votes
3 answers
951 views

Resize Group type node in react-flow-renderer using mouse

I want to add subflow (group type node) on button click and resize it later with mouse and add nodes inside this group with drag and drop. I have searched a lot but all I found is you have set ...
1 vote
0 answers
35 views

Looping over undetermined nested objects [duplicate]

I have a data structure of nodes like so: [ { id: 'admin-sctask56184526_i_courses', type: 'branchNode', data: { id: 'admin-sctask56184526_i_courses', table: 'admin....
  • 111
0 votes
1 answer
508 views

Issue with React Flow and Zoom Pane error

I am having some issues with React Flow working in my react project. I had it working in another project and I wanted to migrate some of the functionality to another, but when I do I get the following....
1 vote
2 answers
64 views

How to create low code based workflow setup in nodejs?

I want to create a workflow automation where an activity comes in and user can setup a multilevel workflow. For frontend i am using https://reactflow.dev How to structure things in nodejs backend. ...
-1 votes
1 answer
40 views

React flow renderer prevent specific node from being deleted

Is there a way to prevent a specific node from being deleted? I have set deleteKeyCode={'Delete'} but want to exclude a node by type from this. <ReactFlow nodes={nodes} edges={...
5 votes
3 answers
3k views

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 ...
  • 151
0 votes
0 answers
112 views

In react-flow can I restrict input from only custom nodes with a specific type

For instance if I have a graph where users can drag nodes of different types (ie; level 1 nodes, level 2 nodes, and level 3 nodes). May I restrict input of level 3 nodes so that they only accept ...
1 vote
0 answers
813 views

Add a new node between two nodes react-flow-render

I use react-flow-render package. I want to add a new node between two nodes, after clicking on the label ( Edge ). To add a new Node, it is necessary to have the sourceHandle, targetHandle , source , ...
2 votes
0 answers
298 views

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 ...
0 votes
1 answer
342 views

Update d3's force-directed graph in a React app while preserving old nodes positions

I am using d3's forceSimulation to calculate (x,y) coordinates for each node given the forces (starting without nodes or links): const simulation = d3.forceSimulation() .force('charge', d3....
0 votes
1 answer
862 views

How can I set the cursor to 'grabbing' when panning in react-flow?

I am using react-flow and the user can pan around by clicking and dragging on the background. I would like the cursor to be 'grab' when hovering over the background, and the cursor to be 'grabbing' ...
1 vote
1 answer
329 views

Create an SVG path (w/ arrow) connecting to a circle element

I've got a graph where source and target elements ('nodes') are circular and the connection between these two (an 'edge') must be an arrow, starting in the center of the source node and pointing to ...