{"id":16192,"library":"reactflow","title":"React Flow","description":"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`.","status":"active","version":"11.11.4","language":"javascript","source_language":"en","source_url":"https://github.com/xyflow/xyflow","tags":["javascript","react","node-based UI","graph","diagram","workflow","react-flow","typescript"],"install":[{"cmd":"npm install reactflow","lang":"bash","label":"npm"},{"cmd":"yarn add reactflow","lang":"bash","label":"yarn"},{"cmd":"pnpm add reactflow","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required for React components and hooks.","package":"react","optional":false},{"reason":"Required for rendering React components to the DOM.","package":"react-dom","optional":false}],"imports":[{"note":"ReactFlow is the default export of the library, not a named export. Ensure you are importing the default component for the main canvas.","wrong":"import { ReactFlow } from 'reactflow';","symbol":"ReactFlow","correct":"import ReactFlow from 'reactflow';"},{"note":"Hooks like useNodesState, useEdgesState, and utilities like addEdge are named exports.","wrong":"import useNodesState from 'reactflow';","symbol":"useNodesState","correct":"import { useNodesState } from 'reactflow';"},{"note":"Helper components such as MiniMap, Controls, and Background are named exports.","wrong":"import MiniMap from 'reactflow';","symbol":"MiniMap","correct":"import { MiniMap, Controls, Background } from 'reactflow';"},{"note":"The core stylesheet is crucial for proper rendering and requires a direct import path to the `dist` folder.","wrong":"import 'reactflow/style.css';","symbol":"StyleSheet","correct":"import 'reactflow/dist/style.css';"}],"quickstart":{"code":"import { useCallback } from 'react';\nimport ReactFlow, {\n  MiniMap,\n  Controls,\n  Background,\n  useNodesState,\n  useEdgesState,\n  addEdge,\n} from 'reactflow';\n\nimport 'reactflow/dist/style.css';\n\nconst initialNodes = [\n  { id: '1', position: { x: 0, y: 0 }, data: { label: 'Node 1' } },\n  { id: '2', position: { x: 250, y: 150 }, data: { label: 'Node 2' } },\n  { id: '3', position: { x: 100, y: 250 }, data: { label: 'Node 3' } },\n];\n\nconst initialEdges = [\n  { id: 'e1-2', source: '1', target: '2', label: 'to the next' },\n  { id: 'e2-3', source: '2', target: '3', animated: true },\n];\n\nfunction Flow() {\n  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);\n  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);\n\n  const onConnect = useCallback((params) => setEdges((eds) => addEdge(params, eds)), [setEdges]);\n\n  return (\n    <div style={{ width: '100vw', height: '100vh' }}>\n      <ReactFlow\n        nodes={nodes}\n        edges={edges}\n        onNodesChange={onNodesChange}\n        onEdgesChange={onEdgesChange}\n        onConnect={onConnect}\n        fitView\n      >\n        <MiniMap />\n        <Controls />\n        <Background variant=\"dots\" gap={12} size={1} />\n      </ReactFlow>\n    </div>\n  );\n}\n\nexport default Flow;\n","lang":"typescript","description":"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."},"warnings":[{"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.","message":"The `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.","severity":"breaking","affected_versions":">=12.0.0"},{"fix":"Always include `import 'reactflow/dist/style.css';` in your root component or a relevant entry file to ensure proper styling.","message":"Forgetting 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.","severity":"gotcha","affected_versions":">=1.0.0"},{"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.","message":"React Flow requires `react` and `react-dom` as peer dependencies with versions `>=17`. Using older versions of React may lead to compatibility issues or errors.","severity":"gotcha","affected_versions":"<17.0.0"},{"fix":"Pass an object mapping your custom type names to their respective React components via the `nodeTypes` or `edgeTypes` prop: `<ReactFlow nodeTypes={nodeTypes} ... />`.","message":"When 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.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"search_vec":"'11.11.4':30 'achiev':77 'activ':34 'also':98 'api':61 'background':107 'base':17,150 'box':112 'build':12 'built':116 'cadenc':46 'chang':83 'chart':22 'complex':20 'compon':102 'consist':44 'control':105 'current':27 'custom':68 'customiz':8 'cypress':122 'develop':128 'diagram':153 'differenti':57 'edg':74 'editor':18 'element':84 'ensur':123 'essenti':100 'experi':129 'extens':67 'flow':2,4,21,157 'frequent':48,53 'function':93 'graph':14,95,152 'high':7 'hook':90 'includ':58 'interact':13 'intuit':60 'javascript':146 'key':56 'less':52 'librari':10,114 'like':103 'line':39 'maintain':35,42 'manipul':96 'minimap':104 'minor/major':54 'name':144 'new':142 'node':16,72,149 'node-bas':15,148 'note':132 'option':69 'out-of-the-box':108 'packag':24,143 'pan':66 'patch':49 'perform':75 'plugin':101 'project':41 'provid':99 're':81 're-rend':80 'react':1,3,9,147,156 'react-flow':155 'reactflow':25 'releas':38,45,55,137 'reliabl':124 'render':76,82 'repres':32 'rich':87 'robust':127 'seamless':63 'set':88 'stabl':37 'test':120 'transit':139 'typescript':118,158 'ui':151 'upcom':135 'updat':50 'user':130 'util':92 'v11':36 'v12':136 'version':29 'workflow':154 'xyflow/react':145 'zoom':64","created_at":"2026-04-21T19:18:44.341120+00:00","updated_at":"2026-04-21T19:18:44.341120+00:00","problems":[{"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.","cause":"React Flow hooks like `useNodesState` or `useEdgesState` are being called outside of a functional React component, or there are multiple instances of React loaded.","error":"Error: Invalid hook call. Hooks can only be called inside of the body of a function component."},{"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.","cause":"The `ReactFlow` component's container does not have explicit `width` and `height` CSS properties, or the `reactflow/dist/style.css` stylesheet is not imported.","error":"TypeError: Cannot read properties of undefined (reading 'x') (or similar rendering issues like nodes overlapping/not appearing)"},{"fix":"Ensure all desired components are explicitly imported using named imports: `import { MiniMap, Controls, Background } from 'reactflow';`","cause":"One of the optional UI components (MiniMap, Controls, Background) is used but not imported from `reactflow`.","error":"Minimap is not defined / Controls is not defined / Background is not defined"}],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":"0.1.0","cli_name":"","cli_version":null,"type":"library","homepage":"https://reactflow.dev","github":"https://github.com/xyflow/xyflow","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/reactflow","openapi_spec":null,"status_page":null,"smithery":null,"categories":["web-framework"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-17","next_check":"2026-07-20","install_tag":null}}