From 6ab4ea796d69ee41b42378ab59b1a5980a815e86 Mon Sep 17 00:00:00 2001 From: Andrew Curtin Date: Wed, 20 Nov 2024 14:39:25 -0500 Subject: [PATCH 1/2] Update package install and references to reactflow for consistency. --- .../pages/learn/tutorials/slide-shows-with-react-flow.mdx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/sites/reactflow.dev/src/pages/learn/tutorials/slide-shows-with-react-flow.mdx b/sites/reactflow.dev/src/pages/learn/tutorials/slide-shows-with-react-flow.mdx index 6f2d1a9d3..9578a484d 100644 --- a/sites/reactflow.dev/src/pages/learn/tutorials/slide-shows-with-react-flow.mdx +++ b/sites/reactflow.dev/src/pages/learn/tutorials/slide-shows-with-react-flow.mdx @@ -107,7 +107,7 @@ Besides React Flow we only need to pull in one dependency, [`react-remark`](http to help us render markdown in our slides. ```bash npm2yarn -npm install reactflow react-remark +npm install @xyflow/react react-remark ``` We'll modify the generated `main.tsx` to include React Flow's styles, as well as @@ -121,7 +121,7 @@ import { ReactFlowProvider } from '@xyflow/react'; import App from './App'; -import 'reactflow/dist/style.css'; +import '@xyflow/react/dist/style.css'; import './index.css'; ReactDOM.createRoot(document.getElementById('root')!).render( @@ -148,7 +148,7 @@ style your app differently from just writing CSS, for example with How you style your app is up to you, but you must **always** include React Flow's styles! If you don't need the default styles, at a minimum you should - include the base styles from `reactflow/dist/base.css`. + include the base styles from `@xyflow/react/dist/base.css`. Each slide of our presentation will be a node on the canvas, so let's create a new file `Slide.tsx` that will be our custom node used to render each slide. From 4f201f0c373c689e598c9ebd83fce3b192ea50ea Mon Sep 17 00:00:00 2001 From: Abbey Yacoe Date: Tue, 26 Nov 2024 11:04:15 +0100 Subject: [PATCH 2/2] docs(slide-show-tutorial): remove duplicate export --- .../src/pages/learn/tutorials/slide-shows-with-react-flow.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/sites/reactflow.dev/src/pages/learn/tutorials/slide-shows-with-react-flow.mdx b/sites/reactflow.dev/src/pages/learn/tutorials/slide-shows-with-react-flow.mdx index 9578a484d..b85c7a937 100644 --- a/sites/reactflow.dev/src/pages/learn/tutorials/slide-shows-with-react-flow.mdx +++ b/sites/reactflow.dev/src/pages/learn/tutorials/slide-shows-with-react-flow.mdx @@ -193,7 +193,7 @@ const nodeTypes = { slide: Slide, }; -export default export default function App() { +export default function App() { const nodes = [ { id: '0', type: 'slide', position: { x: 0, y: 0 }, data: {} }, ];