reactflow

library0.1.0jsnpmunverified

React Flow is a highly customizable React library for building interactive graphs, node-based editors, and complex flow charts. The package `reactflow` is currently at version 11.11.4, which represents the actively maintained v11 stable release line. The project maintains a consistent release cadence with frequent patch updates and less frequent minor/major releases. Key differentiators include its intuitive API for seamless zooming and panning, extensive customization options for both nodes and edges, performant rendering achieved by only re-rendering changed elements, and a rich set of hooks and utility functions for graph manipulation. It also provides essential plugin components like MiniMap, Controls, and Background out-of-the-box. The library is built with TypeScript and tested with Cypress, ensuring reliability and a robust developer experience. Users should note that the upcoming v12 release will transition to a new package name, `@xyflow/react`.

web-framework

npm install reactflow

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · REACTFLOW

reactflow

web-frameworkjavascriptv0.1.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

ReactFlow

✓ import ReactFlow from 'reactflow';

✗ import { ReactFlow } from 'reactflow';

ReactFlow is the default export of the library, not a named export. Ensure you are importing the default component for the main canvas.

useNodesState

✓ import { useNodesState } from 'reactflow';

✗ import useNodesState from 'reactflow';

Hooks like useNodesState, useEdgesState, and utilities like addEdge are named exports.

MiniMap

✓ import { MiniMap, Controls, Background } from 'reactflow';

✗ import MiniMap from 'reactflow';

Helper components such as MiniMap, Controls, and Background are named exports.

StyleSheet

✓ import 'reactflow/dist/style.css';

✗ import 'reactflow/style.css';

The core stylesheet is crucial for proper rendering and requires a direct import path to the `dist` folder.

This quickstart demonstrates a basic React Flow setup with initial nodes and edges, enabling drag, zoom, pan, and interactive connecting. It includes `MiniMap`, `Controls`, and `Background` components for enhanced user experience.

import { useCallback } from 'react'; import ReactFlow, { MiniMap, Controls, Background, useNodesState, useEdgesState, addEdge, } from 'reactflow'; import 'reactflow/dist/style.css'; const initialNodes = [ { id: '1', position: { x: 0, y: 0 }, data: { label: 'Node 1' } }, { id: '2', position: { x: 250, y: 150 }, data: { label: 'Node 2' } }, { id: '3', position: { x: 100, y: 250 }, data: { label: 'Node 3' } }, ]; const initialEdges = [ { id: 'e1-2', source: '1', target: '2', label: 'to the next' }, { id: 'e2-3', source: '2', target: '3', animated: true }, ]; function Flow() { const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes); const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges); const onConnect = useCallback((params) => setEdges((eds) => addEdge(params, eds)), [setEdges]); return ( <div style={{ width: '100vw', height: '100vh' }}> <ReactFlow nodes={nodes} edges={edges} onNodesChange={onNodesChange} onEdgesChange={onEdgesChange} onConnect={onConnect} fitView > <MiniMap /> <Controls /> <Background variant="dots" gap={12} size={1} /> </ReactFlow> </div> ); } export default Flow;

Debug

Known issues

breakingThe `reactflow` package (v11) is being succeeded by `@xyflow/react` (v12). This transition involves a package name change and significant API updates. Users of `reactflow` should plan for a migration when moving to v12.

fix

For new projects, consider installing `@xyflow/react` to use the latest v12 features. For existing v11 projects, refer to the `@xyflow/react` migration guide for detailed instructions on upgrading and adapting to the new API and package name.

affects: >=12.0.0

gotchaForgetting to import the `reactflow/dist/style.css` stylesheet will result in an unstyled and potentially non-functional React Flow canvas, as essential layout and component styles are missing.

fix

Always include `import 'reactflow/dist/style.css';` in your root component or a relevant entry file to ensure proper styling.

affects: >=1.0.0

gotchaReact Flow requires `react` and `react-dom` as peer dependencies with versions `>=17`. Using older versions of React may lead to compatibility issues or errors.

fix

Ensure your project's `react` and `react-dom` versions are `17.0.0` or higher. Update your `package.json` dependencies and reinstall if necessary.

affects: <17.0.0

gotchaWhen implementing custom nodes or edges, they must be explicitly registered with the `nodeTypes` and `edgeTypes` props on the `ReactFlow` component. Failing to do so will prevent your custom elements from rendering.

fix

Pass an object mapping your custom type names to their respective React components via the `nodeTypes` or `edgeTypes` prop: `<ReactFlow nodeTypes={nodeTypes} ... />`.

affects: >=1.0.0

Errors

Common errors & fixes

Error: Invalid hook call. Hooks can only be called inside of the body of a function component.

React Flow hooks like `useNodesState` or `useEdgesState` are being called outside of a functional React component, or there are multiple instances of React loaded.

fix

Ensure all React Flow hooks are called within the top level of a functional React component. If using multiple React versions, ensure your bundler resolves to a single React instance.

TypeError: Cannot read properties of undefined (reading 'x') (or similar rendering issues like nodes overlapping/not appearing)

The `ReactFlow` component's container does not have explicit `width` and `height` CSS properties, or the `reactflow/dist/style.css` stylesheet is not imported.

fix

Provide a defined `width` and `height` to the `div` wrapper around your `ReactFlow` component (e.g., `style={{ width: '100vw', height: '100vh' }}`). Additionally, verify that `import 'reactflow/dist/style.css';` is present in your application.

Minimap is not defined / Controls is not defined / Background is not defined

One of the optional UI components (MiniMap, Controls, Background) is used but not imported from `reactflow`.

fix

Ensure all desired components are explicitly imported using named imports: `import { MiniMap, Controls, Background } from 'reactflow';`

Upgrade

Version history

0.1.0latest on npm

Audit

Dependencies

reactrequiredRequired for React components and hooks.

react-domrequiredRequired for rendering React components to the DOM.

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/xyflow/xyflow ↗

packagehttps://www.npmjs.com/package/reactflow ↗

homepagehttps://reactflow.dev ↗