![Introducing Enhanced Alert Actions and Triage Functionality](https://cdn.sanity.io/images/cgdhsj6q/production/fe71306d515f85de6139b46745ea7180362324f0-2530x946.png?w=800&fit=max&auto=format)
Product
Introducing Enhanced Alert Actions and Triage Functionality
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
reactflow
Advanced tools
Readme
A highly customizable React component for building interactive graphs and node-based editors.
🚀 Getting Started | 📖 Documentation | 📺 Examples | ☎️ Discord | 💎 React Flow Pro
The main branch is the home of @xyflow/svelte and the upcoming @xyflow/react (React Flow v12). The current version is maintained and lives on the v11 branch.
Are you using React Flow for a personal project? Great! No sponsorship needed, you can support us by reporting any bugs you find, sending us screenshots of your projects, and starring us on Github 🌟
Are you using React Flow at your organization and making money from it? Awesome! We rely on your support to keep React Flow developed and maintained under an MIT License, just how we like it. You can do that on the React Flow Pro website or through Github Sponsors.
You can find more information in our React Flow Pro FAQs.
The easiest way to get the latest version of React Flow is to install it via npm, yarn or pnpm:
npm install reactflow
This is only a very basic usage example of React Flow. To see everything that is possible with the library, please refer to the website for guides, examples and the full API reference.
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: '1' } },
{ id: '2', position: { x: 0, y: 100 }, data: { label: '2' } },
];
const initialEdges = [{ id: 'e1-2', source: '1', target: '2' }];
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 (
<ReactFlow
nodes={nodes}
edges={edges}
onNodesChange={onNodesChange}
onEdgesChange={onEdgesChange}
onConnect={onConnect}
>
<MiniMap />
<Controls />
<Background />
</ReactFlow>
);
}
Before you can start developing please make sure that you have pnpm installed (npm i -g pnpm
). Then install the dependencies using pnpm: pnpm install
.
For local development, you can use pnpm dev
.
Testing is done with cypress. You can find the tests in the examples/cypress
folder. In order to run the tests do:
pnpm test
React Flow is developed and maintained by webkid, a web development agency with focus on data driven applications from Berlin. If you need help or want to talk to us about a collaboration, feel free to contact us:
You can also use our contact form or join the React Flow Discord Server.
React Flow was initially developed for datablocks, a graph-based editor for transforming, analyzing and visualizing data in the browser. Under the hood, React Flow depends on these great libraries:
React Flow is MIT licensed.
FAQs
A highly customizable React library for building node-based editors and interactive flow charts
The npm package reactflow receives a total of 453,088 weekly downloads. As such, reactflow popularity was classified as popular.
We found that reactflow demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
Security News
Polyfill.io has been serving malware for months via its CDN, after the project's open source maintainer sold the service to a company based in China.
Security News
OpenSSF is warning open source maintainers to stay vigilant against reputation farming on GitHub, where users artificially inflate their status by manipulating interactions on closed issues and PRs.