Global and multi-canvas state store for React Flow projects.
npm install reactflow-canvas-storeGlobal and multi-canvas state management solution for React Flow projects.
---
- ✅ Global store shared across all canvases.
- ✅ Canvas-level isolated store with canvasId scoping.
- ✅ React Context + hooks for reactive updates.
- ✅ Simple API for imperative or hook-based access.
- ✅ Written in 100% TypeScript.
---
``bash
npm install reactflow-canvas-store
Make sure to also install React as a peer dependency:
`bash`
npm install react react-dom
`tsx
import {
GlobalStoreProvider,
CanvasStoreProvider,
} from 'reactflow-canvas-store';
function App() {
return (
);
}
`
`tsx
import { useGlobalStore } from 'reactflow-canvas-store';
function SettingsPanel() {
const [theme, setTheme] = useGlobalStore
return (
);
}
`
`tsx
import { useCanvasStore } from 'reactflow-canvas-store';
function CanvasNode({ canvasId }: { canvasId: string }) {
const [nodes, setNodes] = useCanvasStore
return (
);
}
`
⚠️ Use (nodes || []) to avoid errors on initial undefined.
###🔸 4. Imperative Access (without hooks)
`ts
import {
setGlobalStore,
getGlobalStore,
setCanvasStore,
getCanvasStore,
} from 'reactflow-canvas-store';
setGlobalStore('language', 'en');
console.log(getGlobalStore('language')); // 'en'
setCanvasStore('canvas1', 'edges', []);
console.log(getCanvasStore('canvas1', 'edges'));
`
| Reactive global state hook |
| getGlobalStore() | Non-reactive global getter |
| setGlobalStore() | Global setter |
| useCanvasStore(id) | Reactive canvas-specific hook |
| getCanvasStore(id) | Non-reactive canvas-specific getter |
| setCanvasStore(id) | Canvas-specific setter |
| GlobalStoreProvider | Wraps app for global context |
| CanvasStoreProvider | Wraps a canvas and provides scoped store |
📂 Folder Structure
`css
src/
global/
globalStore.ts
GlobalStoreProvider.tsx
useGlobalStore.ts
canvas/
canvasStore.ts
CanvasStoreProvider.tsx
useCanvasStore.ts
index.ts
``