Skip to Content

2024-11-19

Our examples have a fresh new look

We’ve revamped the styles across all our React Flow examples. Plus, we added a new theme file to show you how to customize the style and interactions of your flows.

We think it looks fantastic and can’t wait to hear your feedback. Check out our updated Feature Overview below, along with all of our other updated examples.

import React, { useCallback } from 'react'; import { ReactFlow, addEdge, MiniMap, Controls, Background, useNodesState, useEdgesState, } from '@xyflow/react'; import '@xyflow/react/dist/style.css'; import { nodes as initialNodes, edges as initialEdges, } from './initial-elements'; import AnnotationNode from './AnnotationNode'; import ToolbarNode from './ToolbarNode'; import ResizerNode from './ResizerNode'; import CircleNode from './CircleNode'; import TextInputNode from './TextInputNode'; import ButtonEdge from './ButtonEdge'; const nodeTypes = { annotation: AnnotationNode, tools: ToolbarNode, resizer: ResizerNode, circle: CircleNode, textinput: TextInputNode, }; const edgeTypes = { button: ButtonEdge, }; const nodeClassName = (node) => node.type; const OverviewFlow = () => { const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes); const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges); const onConnect = useCallback( (params) => setEdges((eds) => addEdge(params, eds)), [], ); return ( <ReactFlow nodes={nodes} edges={edges} onNodesChange={onNodesChange} onEdgesChange={onEdgesChange} onConnect={onConnect} fitView attributionPosition="top-right" nodeTypes={nodeTypes} edgeTypes={edgeTypes} > <MiniMap zoomable pannable nodeClassName={nodeClassName} /> <Controls /> <Background /> </ReactFlow> ); }; export default OverviewFlow;

Get Pro examples, prioritized bug reports, 1:1 support from the maintainers, and more with React Flow Pro

Last updated on