diff --git a/README.md b/README.md index b398b065..8f6ce20b 100644 --- a/README.md +++ b/README.md @@ -17,13 +17,11 @@ Powerful open source libraries for building node-based UIs with React or Svelte. ## The xyflow mono repo The xyflow repository is the home of four packages: +* React Flow 12 `@xyflow/react` [packages/react](./packages/react) * React Flow 11 `reactflow` [v11 branch](https://github.com/xyflow/xyflow/tree/v11) -* React Flow 12 (beta) `@xyflow/react` [packages/react](./packages/react) * Svelte Flow `@xyflow/svelte` [packages/svelte](./packages/svelte) * Shared helper library `@xyflow/system` [packages/system](./packages/system) -**We just moved repositories** from the @wbkd org to this one. React Flow v11 will remain on the [v11 branch](https://github.com/xyflow/xyflow/tree/v11). When we have a stable v12, the package name of React Flow will change from `reactflow` to `@xyflow/react`. - ## Commercial usage **Are you using React Flow or Svelte 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 🌟 @@ -40,22 +38,23 @@ The best way to get started is to check out the [React Flow](https://reactflow.d ### Installation ```sh -npm install reactflow +npm install @xyflow/react ``` ### Basic usage ```jsx import { useCallback } from 'react'; -import ReactFlow, { +import { + ReactFlow, MiniMap, Controls, Background, useNodesState, useEdgesState, addEdge, -} from 'reactflow'; +} from '@xyflow/react'; -import 'reactflow/dist/style.css'; +import '@xyflow/react/dist/style.css'; const initialNodes = [ { id: '1', position: { x: 0, y: 0 }, data: { label: '1' } }, diff --git a/packages/react/README.md b/packages/react/README.md index a3e9d66b..360c368b 100644 --- a/packages/react/README.md +++ b/packages/react/README.md @@ -38,7 +38,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, yarn or pnpm: ```bash -npm install reactflow +npm install @xyflow/react ``` ## Quickstart @@ -47,16 +47,17 @@ This is only a very basic usage example of React Flow. To see everything that is ```jsx import { useCallback } from 'react'; -import ReactFlow, { +import { + ReactFlow, MiniMap, Controls, Background, useNodesState, useEdgesState, addEdge, -} from 'reactflow'; +} from '@xyflow/react'; -import 'reactflow/dist/style.css'; +import '@xyflow/react/dist/style.css'; const initialNodes = [ { id: '1', position: { x: 0, y: 0 }, data: { label: '1' } },