diff --git a/README.md b/README.md index fa5f0aa8..158b0af1 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,7 @@
![GitHub License MIT](https://img.shields.io/github/license/wbkd/react-flow?color=%23ff0072) -![npm downloads](https://img.shields.io/npm/dt/react-flow-renderer?color=%23FF0072&label=downloads) +![npm downloads](https://img.shields.io/npm/dt/reactflow?color=%23FF0072&label=downloads) ![GitHub Repo stars](https://img.shields.io/github/stars/wbkd/react-flow?color=%23FF0072) ![GitHub release (latest by date)](https://img.shields.io/github/v/release/wbkd/react-flow?color=%23FF0072) @@ -36,7 +36,7 @@ You can find more information in our [React Flow Pro FAQs](https://pro.reactflow The easiest way to get the latest version of React Flow is to install it via npm: ```bash -npm install react-flow-renderer +npm install reactflow ``` ## Quick Start @@ -44,7 +44,7 @@ npm install react-flow-renderer 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](https://reactflow.dev) for [guides](https://reactflow.dev/docs/guides/custom-nodes), [examples](https://reactflow.dev/docs/examples/overview) and [API reference](https://reactflow.dev/docs/api/react-flow-props). ```jsx -import ReactFlow, { MiniMap, Controls } from 'react-flow-renderer'; +import ReactFlow, { MiniMap, Controls } from 'reactflow'; function Flow({ nodes, edges, onNodesChange, onEdgesChange, onConnect }) { return ( diff --git a/examples/nextjs/pages/Backgrounds/index.tsx b/examples/nextjs/pages/Backgrounds/index.tsx index 898328ac..bda36161 100644 --- a/examples/nextjs/pages/Backgrounds/index.tsx +++ b/examples/nextjs/pages/Backgrounds/index.tsx @@ -1,7 +1,6 @@ import React, { FC } from 'react'; -import { - ReactFlow, +import ReactFlow, { Node, ReactFlowProvider, useNodesState, diff --git a/examples/nextjs/pages/ControlledUncontrolled/index.tsx b/examples/nextjs/pages/ControlledUncontrolled/index.tsx index 37b68d3f..0f31a279 100644 --- a/examples/nextjs/pages/ControlledUncontrolled/index.tsx +++ b/examples/nextjs/pages/ControlledUncontrolled/index.tsx @@ -1,6 +1,5 @@ import React from 'react'; -import { - ReactFlow, +import ReactFlow, { useReactFlow, Node, Edge, @@ -9,7 +8,7 @@ import { useEdgesState, Background, BackgroundVariant, -} from '@react-flow/bunde'; +} from 'reactflow'; const defaultNodes: Node[] = [ { diff --git a/examples/nextjs/pages/CustomConnectionLine/index.tsx b/examples/nextjs/pages/CustomConnectionLine/index.tsx index 88f15e76..e2cb53e8 100644 --- a/examples/nextjs/pages/CustomConnectionLine/index.tsx +++ b/examples/nextjs/pages/CustomConnectionLine/index.tsx @@ -1,6 +1,5 @@ import React, { useCallback } from 'react'; -import { - ReactFlow, +import ReactFlow, { Node, addEdge, Connection, diff --git a/examples/nextjs/pages/CustomNode/index.tsx b/examples/nextjs/pages/CustomNode/index.tsx index 07795fb8..92553087 100644 --- a/examples/nextjs/pages/CustomNode/index.tsx +++ b/examples/nextjs/pages/CustomNode/index.tsx @@ -1,6 +1,5 @@ import React, { useState, useEffect, MouseEvent, ChangeEvent, useCallback } from 'react'; -import { - ReactFlow, +import ReactFlow, { MiniMap, Controls, addEdge, diff --git a/examples/nextjs/pages/DefaultNodes/index.tsx b/examples/nextjs/pages/DefaultNodes/index.tsx index 32cfaf3c..ad623c2f 100644 --- a/examples/nextjs/pages/DefaultNodes/index.tsx +++ b/examples/nextjs/pages/DefaultNodes/index.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { ReactFlow, useReactFlow, Node, Edge, ReactFlowProvider, Background, BackgroundVariant } from 'reactflow'; +import ReactFlow, { useReactFlow, Node, Edge, ReactFlowProvider, Background, BackgroundVariant } from 'reactflow'; const defaultNodes: Node[] = [ { diff --git a/examples/nextjs/pages/DragHandle/index.tsx b/examples/nextjs/pages/DragHandle/index.tsx index 6d65d1ca..b0f87e94 100644 --- a/examples/nextjs/pages/DragHandle/index.tsx +++ b/examples/nextjs/pages/DragHandle/index.tsx @@ -1,11 +1,5 @@ import React, { MouseEvent } from 'react'; -import { - ReactFlow, - Node, - Edge, - useNodesState, - useEdgesState, -} from '@react-flow/core'; +import ReactFlow, { Node, Edge, useNodesState, useEdgesState } from 'reactflow'; import DragHandleNode from './DragHandleNode'; diff --git a/examples/nextjs/pages/DragNDrop/index.tsx b/examples/nextjs/pages/DragNDrop/index.tsx index dfe3ea17..e1813fc3 100644 --- a/examples/nextjs/pages/DragNDrop/index.tsx +++ b/examples/nextjs/pages/DragNDrop/index.tsx @@ -1,6 +1,5 @@ import React, { useState, DragEvent } from 'react'; -import { - ReactFlow, +import ReactFlow, { ReactFlowProvider, addEdge, ReactFlowInstance, diff --git a/examples/nextjs/pages/EdgeTypes/index.tsx b/examples/nextjs/pages/EdgeTypes/index.tsx index 238f8202..7e87d780 100644 --- a/examples/nextjs/pages/EdgeTypes/index.tsx +++ b/examples/nextjs/pages/EdgeTypes/index.tsx @@ -3,8 +3,7 @@ */ import React, { useCallback } from 'react'; -import { - ReactFlow, +import ReactFlow, { Background, Controls, MiniMap, diff --git a/examples/nextjs/pages/Edges/index.tsx b/examples/nextjs/pages/Edges/index.tsx index a672be21..f4315360 100644 --- a/examples/nextjs/pages/Edges/index.tsx +++ b/examples/nextjs/pages/Edges/index.tsx @@ -1,8 +1,7 @@ import React, { MouseEvent, useCallback } from 'react'; -import { +import ReactFlow, { Controls, Background, - ReactFlow, MiniMap, addEdge, Connection, diff --git a/examples/nextjs/pages/Empty/index.tsx b/examples/nextjs/pages/Empty/index.tsx index ff9ec986..db24fb0f 100644 --- a/examples/nextjs/pages/Empty/index.tsx +++ b/examples/nextjs/pages/Empty/index.tsx @@ -1,7 +1,6 @@ import React, { MouseEvent, CSSProperties, useCallback } from 'react'; -import { - ReactFlow, +import ReactFlow, { Background, BackgroundVariant, Controls, diff --git a/examples/nextjs/pages/FloatingEdges/index.tsx b/examples/nextjs/pages/FloatingEdges/index.tsx index 7d1b3b4a..ab9e3c04 100644 --- a/examples/nextjs/pages/FloatingEdges/index.tsx +++ b/examples/nextjs/pages/FloatingEdges/index.tsx @@ -1,7 +1,6 @@ import React, { useCallback } from 'react'; -import { - ReactFlow, +import ReactFlow, { Background, addEdge, ReactFlowInstance, diff --git a/examples/nextjs/pages/Hidden/index.tsx b/examples/nextjs/pages/Hidden/index.tsx index b4ab716b..842f9944 100644 --- a/examples/nextjs/pages/Hidden/index.tsx +++ b/examples/nextjs/pages/Hidden/index.tsx @@ -1,6 +1,6 @@ import React, { useState, useEffect, useCallback } from 'react'; -import { ReactFlow, addEdge, Connection, Edge, Node, useNodesState, useEdgesState, MiniMap, Controls } from 'reactflow'; +import ReactFlow, { addEdge, Connection, Edge, Node, useNodesState, useEdgesState, MiniMap, Controls } from 'reactflow'; const initialNodes: Node[] = [ { diff --git a/examples/nextjs/pages/Interaction/index.tsx b/examples/nextjs/pages/Interaction/index.tsx index e68ba86e..922adf45 100644 --- a/examples/nextjs/pages/Interaction/index.tsx +++ b/examples/nextjs/pages/Interaction/index.tsx @@ -1,6 +1,5 @@ import React, { useState, MouseEvent as ReactMouseEvent, WheelEvent } from 'react'; -import { - ReactFlow, +import ReactFlow, { addEdge, Node, Connection, diff --git a/examples/nextjs/pages/Layouting/index.tsx b/examples/nextjs/pages/Layouting/index.tsx index e3b9bcb4..6e607551 100644 --- a/examples/nextjs/pages/Layouting/index.tsx +++ b/examples/nextjs/pages/Layouting/index.tsx @@ -1,7 +1,6 @@ import React, { useCallback } from 'react'; -import { +import ReactFlow, { Controls, - ReactFlow, ReactFlowProvider, addEdge, Connection, diff --git a/examples/nextjs/pages/MultiFlows/index.tsx b/examples/nextjs/pages/MultiFlows/index.tsx index 8cd1e9ed..c5ffccfc 100644 --- a/examples/nextjs/pages/MultiFlows/index.tsx +++ b/examples/nextjs/pages/MultiFlows/index.tsx @@ -1,7 +1,6 @@ import React, { FC } from 'react'; -import { - ReactFlow, +import ReactFlow, { Background, addEdge, Node, diff --git a/examples/nextjs/pages/NestedNodes/index.tsx b/examples/nextjs/pages/NestedNodes/index.tsx index 45ea9c10..5e9c80f1 100644 --- a/examples/nextjs/pages/NestedNodes/index.tsx +++ b/examples/nextjs/pages/NestedNodes/index.tsx @@ -1,9 +1,8 @@ import React, { useState, MouseEvent, useCallback } from 'react'; -import { +import ReactFlow, { Controls, MiniMap, Background, - ReactFlow, addEdge, useNodesState, useEdgesState, diff --git a/examples/nextjs/pages/NodeTypeChange/index.tsx b/examples/nextjs/pages/NodeTypeChange/index.tsx index eedefb96..8cf1a41f 100644 --- a/examples/nextjs/pages/NodeTypeChange/index.tsx +++ b/examples/nextjs/pages/NodeTypeChange/index.tsx @@ -1,6 +1,6 @@ import React, { CSSProperties, useCallback } from 'react'; -import { ReactFlow, addEdge, Node, Position, Connection, Edge, useNodesState, useEdgesState } from 'reactflow'; +import ReactFlow, { addEdge, Node, Position, Connection, Edge, useNodesState, useEdgesState } from 'reactflow'; const initialNodes: Node[] = [ { diff --git a/examples/nextjs/pages/NodeTypesObjectChange/index.tsx b/examples/nextjs/pages/NodeTypesObjectChange/index.tsx index 94b2993f..c52baeff 100644 --- a/examples/nextjs/pages/NodeTypesObjectChange/index.tsx +++ b/examples/nextjs/pages/NodeTypesObjectChange/index.tsx @@ -1,7 +1,5 @@ import React, { useState, CSSProperties, FC, useCallback } from 'react'; - -import { - ReactFlow, +import ReactFlow, { addEdge, Node, Position, diff --git a/examples/nextjs/pages/Overview/index.tsx b/examples/nextjs/pages/Overview/index.tsx index 29a587a4..50a4f705 100644 --- a/examples/nextjs/pages/Overview/index.tsx +++ b/examples/nextjs/pages/Overview/index.tsx @@ -1,7 +1,5 @@ import React, { MouseEvent as ReactMouseEvent, CSSProperties, useCallback } from 'react'; - -import { - ReactFlow, +import ReactFlow, { addEdge, Node, Viewport, diff --git a/examples/nextjs/pages/Provider/index.tsx b/examples/nextjs/pages/Provider/index.tsx index 13528308..b4becc13 100644 --- a/examples/nextjs/pages/Provider/index.tsx +++ b/examples/nextjs/pages/Provider/index.tsx @@ -1,6 +1,5 @@ import React, { MouseEvent, useCallback } from 'react'; -import { - ReactFlow, +import ReactFlow, { Controls, ReactFlowProvider, addEdge, diff --git a/examples/nextjs/pages/SaveRestore/index.tsx b/examples/nextjs/pages/SaveRestore/index.tsx index f6f0d6b5..87160707 100644 --- a/examples/nextjs/pages/SaveRestore/index.tsx +++ b/examples/nextjs/pages/SaveRestore/index.tsx @@ -1,5 +1,5 @@ import React, { useCallback } from 'react'; -import { ReactFlow, ReactFlowProvider, Node, addEdge, Connection, Edge, useNodesState, useEdgesState } from 'reactflow'; +import ReactFlow, { ReactFlowProvider, Node, addEdge, Connection, Edge, useNodesState, useEdgesState } from 'reactflow'; import Controls from './Controls'; const initialNodes: Node[] = [ diff --git a/examples/nextjs/pages/Stress/index.tsx b/examples/nextjs/pages/Stress/index.tsx index 0f3232cf..ffdb81ba 100644 --- a/examples/nextjs/pages/Stress/index.tsx +++ b/examples/nextjs/pages/Stress/index.tsx @@ -1,6 +1,5 @@ import React, { useState, CSSProperties, useCallback } from 'react'; -import { - ReactFlow, +import ReactFlow, { ReactFlowInstance, Edge, Node, diff --git a/examples/nextjs/pages/Subflow/index.tsx b/examples/nextjs/pages/Subflow/index.tsx index e570ade4..84003c83 100644 --- a/examples/nextjs/pages/Subflow/index.tsx +++ b/examples/nextjs/pages/Subflow/index.tsx @@ -1,6 +1,5 @@ import React, { useState, MouseEvent, useCallback } from 'react'; -import { - ReactFlow, +import ReactFlow, { addEdge, Node, Edge, diff --git a/examples/nextjs/pages/Switch/index.tsx b/examples/nextjs/pages/Switch/index.tsx index 384be206..eb5d6519 100644 --- a/examples/nextjs/pages/Switch/index.tsx +++ b/examples/nextjs/pages/Switch/index.tsx @@ -1,5 +1,5 @@ import React, { MouseEvent, useCallback } from 'react'; -import { ReactFlow, addEdge, Node, Connection, Edge, useNodesState, useEdgesState } from 'reactflow'; +import ReactFlow, { addEdge, Node, Connection, Edge, useNodesState, useEdgesState } from 'reactflow'; const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node); const onNodeClick = (_: MouseEvent, node: Node) => console.log('click', node); diff --git a/examples/nextjs/pages/TouchDevice/index.tsx b/examples/nextjs/pages/TouchDevice/index.tsx index d77b47ac..6125630e 100644 --- a/examples/nextjs/pages/TouchDevice/index.tsx +++ b/examples/nextjs/pages/TouchDevice/index.tsx @@ -1,5 +1,5 @@ import React, { useCallback } from 'react'; -import { ReactFlow, Node, Edge, useNodesState, useEdgesState, Position, Connection, addEdge } from 'reactflow'; +import ReactFlow, { Node, Edge, useNodesState, useEdgesState, Position, Connection, addEdge } from 'reactflow'; import styles from './touch-device.module.css'; diff --git a/examples/nextjs/pages/Undirectional/index.tsx b/examples/nextjs/pages/Undirectional/index.tsx index ebcdcf35..5037161d 100644 --- a/examples/nextjs/pages/Undirectional/index.tsx +++ b/examples/nextjs/pages/Undirectional/index.tsx @@ -1,7 +1,5 @@ import React, { MouseEvent, useCallback } from 'react'; - -import { - ReactFlow, +import ReactFlow, { useReactFlow, NodeTypes, addEdge, @@ -15,6 +13,7 @@ import { useNodesState, useEdgesState, } from 'reactflow'; + import CustomNode from './CustomNode'; const initialNodes: Node[] = [ diff --git a/examples/nextjs/pages/UpdatableEdge/index.tsx b/examples/nextjs/pages/UpdatableEdge/index.tsx index a0faf359..7b14ffd6 100644 --- a/examples/nextjs/pages/UpdatableEdge/index.tsx +++ b/examples/nextjs/pages/UpdatableEdge/index.tsx @@ -1,6 +1,5 @@ import React, { useState, useCallback } from 'react'; -import { - ReactFlow, +import ReactFlow, { updateEdge, addEdge, applyNodeChanges, diff --git a/examples/nextjs/pages/UpdateNode/index.tsx b/examples/nextjs/pages/UpdateNode/index.tsx index efb336ff..8ec50299 100644 --- a/examples/nextjs/pages/UpdateNode/index.tsx +++ b/examples/nextjs/pages/UpdateNode/index.tsx @@ -1,5 +1,5 @@ import React, { useEffect, useState } from 'react'; -import { ReactFlow, Node, Edge, useNodesState, useEdgesState } from 'reactflow'; +import ReactFlow, { Node, Edge, useNodesState, useEdgesState } from 'reactflow'; import styles from './updatenode.module.css'; diff --git a/examples/nextjs/pages/UseReactFlow/index.tsx b/examples/nextjs/pages/UseReactFlow/index.tsx index f2eb8e2c..7133cec9 100644 --- a/examples/nextjs/pages/UseReactFlow/index.tsx +++ b/examples/nextjs/pages/UseReactFlow/index.tsx @@ -1,8 +1,7 @@ import React, { useCallback, MouseEvent, useEffect } from 'react'; -import { +import ReactFlow, { Background, MiniMap, - ReactFlow, Node, addEdge, useReactFlow, diff --git a/examples/nextjs/pages/UseUpdateNodeInternals/index.tsx b/examples/nextjs/pages/UseUpdateNodeInternals/index.tsx index 7f8185fa..8a989b59 100644 --- a/examples/nextjs/pages/UseUpdateNodeInternals/index.tsx +++ b/examples/nextjs/pages/UseUpdateNodeInternals/index.tsx @@ -1,6 +1,5 @@ import { useCallback, MouseEvent } from 'react'; -import { - ReactFlow, +import ReactFlow, { NodeTypes, addEdge, useReactFlow, diff --git a/examples/nextjs/pages/Validation/index.tsx b/examples/nextjs/pages/Validation/index.tsx index a59e3eb5..b11c1f92 100644 --- a/examples/nextjs/pages/Validation/index.tsx +++ b/examples/nextjs/pages/Validation/index.tsx @@ -1,6 +1,5 @@ import React, { FC, useCallback, useState } from 'react'; -import { - ReactFlow, +import ReactFlow, { addEdge, Handle, Connection, diff --git a/examples/nextjs/pages/index.tsx b/examples/nextjs/pages/index.tsx index 6027329a..37c5d010 100755 --- a/examples/nextjs/pages/index.tsx +++ b/examples/nextjs/pages/index.tsx @@ -1,8 +1,6 @@ import React, { MouseEvent } from 'react'; - -import { +import ReactFlow, { MiniMap, - ReactFlow, Background, BackgroundVariant, Controls, diff --git a/packages/reactflow/README.md b/packages/reactflow/README.md index b0342eb4..158b0af1 100644 --- a/packages/reactflow/README.md +++ b/packages/reactflow/README.md @@ -1,16 +1,104 @@ -# reactflow +![readme-header-dark](https://user-images.githubusercontent.com/3797215/156384064-08a889d6-73c0-4cbf-8ff3-28dc601d1f5f.svg#gh-dark-mode-only) +![readme-header](https://user-images.githubusercontent.com/3797215/156259138-fb9f59f8-52f2-474a-b78c-6570867e4ead.svg#gh-light-mode-only) -Bundles: +
-* @react-flow/core -* @react-flow/background -* @react-flow/controls -* @react-flow/minimap +![GitHub License MIT](https://img.shields.io/github/license/wbkd/react-flow?color=%23ff0072) +![npm downloads](https://img.shields.io/npm/dt/reactflow?color=%23FF0072&label=downloads) +![GitHub Repo stars](https://img.shields.io/github/stars/wbkd/react-flow?color=%23FF0072) +![GitHub release (latest by date)](https://img.shields.io/github/v/release/wbkd/react-flow?color=%23FF0072) +A highly customizable React component for building interactive graphs and node-based editors. -## Installation +[🚀 Getting Started](https://reactflow.dev/docs/getting-started/installation) | [📖 Documentation](https://reactflow.dev/docs/api/react-flow-props) | [📺 Examples](https://reactflow.dev/docs/examples/overview) | [☎️ Discord](https://discord.gg/RVmnytFmGW) | [💎 React Flow Pro](https://pro.reactflow.dev/pricing) -```sh +
+ +--- + +## Key Features + +- **Easy to use:** Seamless zooming and panning, single- and multi selection of graph elements and keyboard shortcuts are supported out of the box +- **Customizable:** Different [node](https://reactflow.dev/docs/api/nodes/node-types) and [edge types](https://reactflow.dev/docs/api/edges/edge-types) and support for custom nodes with multiple handles and custom edges +- **Fast rendering:** Only nodes that have changed are re-rendered and only those in the viewport are displayed +- **Hooks and Utils:** [Hooks](https://reactflow.dev/docs/api/hooks/use-react-flow) for handling nodes, edges and the viewport and graph [helper functions](https://reactflow.dev/docs/api/graph-util-functions) +- **Plugin Components:** [Background](https://reactflow.dev/docs/api/plugin-components/background), [MiniMap](https://reactflow.dev/docs/api/plugin-components/minimap) and [Controls](https://reactflow.dev/docs/api/plugin-components/controls) +- **Reliable**: Written in [Typescript](https://www.typescriptlang.org/) and tested with [cypress](https://www.cypress.io/) + +## Commercial Usage / Attribution + +React Flow includes a small attribution that links to the React Flow website. **We expect companies who are using React Flow commercially to subscribe to [React Flow Pro](https://pro.reactflow.dev/pricing) if they want to remove the attribution.** By subscribing you get access to other exclusive services like advanced examples, individual support or prioritized bug reports. In non-commercial applications you may hide the attribution without subscribing but are welcome to [sponsor us on Github](https://github.com/sponsors/wbkd). + +You can find more information in our [React Flow Pro FAQs](https://pro.reactflow.dev/faq). + +## Installation + +The easiest way to get the latest version of React Flow is to install it via npm: + +```bash npm install reactflow ``` +## Quick Start + +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](https://reactflow.dev) for [guides](https://reactflow.dev/docs/guides/custom-nodes), [examples](https://reactflow.dev/docs/examples/overview) and [API reference](https://reactflow.dev/docs/api/react-flow-props). + +```jsx +import ReactFlow, { MiniMap, Controls } from 'reactflow'; + +function Flow({ nodes, edges, onNodesChange, onEdgesChange, onConnect }) { + return ( + + + + + ); +} +``` + +## Development + +Before you can start developing please make sure that you have yarn classic installed (`npm i -g yarn`). Then install the dependencies using yarn: `yarn`. + +For local development, you can use `yarn dev`. This will run preconstruct and build all the packages. + +## Testing + +Testing is done with cypress. You can find the tests in the [`integration/flow`](/cypress/integration/flow) folder. In order to run the tests do: + +```sh +npm run test +``` + +## Maintainers + +React Flow is developed and maintained by [webkid](https://webkid.io), 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: + +- Moritz Klack • [Twitter](https://twitter.com/moklick) • [Github](https://github.com/moklick) +- Christopher Möller • [Twitter](https://twitter.com/chrtze) • [Github](https://github.com/chrtze) + +You can also use our [contact form](https://pro.reactflow.dev/contact) or join the [React Flow Discord Server](https://discord.gg/Bqt6xrs). + +## Community Packages + +- [useUndoable](https://github.com/Infinium8/useUndoable) - Hook for undo/redo functionality with an explicit React Flow example +- [react-flow-smart-edge](https://github.com/tisoap/react-flow-smart-edge) - Custom edge that doesn't intersect with nodes +- [Feliz.ReactFlow](https://github.com/tforkmann/Feliz.ReactFlow) - Feliz React Bindings for React Flow + +## Credits + +React Flow was initially developed for [datablocks](https://datablocks.pro), a graph-based editor for transforming, analyzing and visualizing data in your browser. Under the hood, React Flow depends on these great libraries: + +- [d3-zoom](https://github.com/d3/d3-zoom) - used for zoom, pan and drag interactions with the graph canvas +- [d3-drag](https://github.com/d3/d3-drag) - used for making the nodes draggable +- [zustand](https://github.com/pmndrs/zustand) - internal state management + +## License + +React Flow is [MIT licensed](https://github.com/wbkd/react-flow/blob/main/LICENSE). diff --git a/packages/reactflow/src/index.ts b/packages/reactflow/src/index.ts index 4c013751..145d5063 100644 --- a/packages/reactflow/src/index.ts +++ b/packages/reactflow/src/index.ts @@ -2,3 +2,7 @@ export * from '@react-flow/core'; export * from '@react-flow/minimap'; export * from '@react-flow/controls'; export * from '@react-flow/background'; + +import { ReactFlow } from '@react-flow/core'; + +export default ReactFlow;