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