
Nanostores Has a Free Framework-Agnostic State Manager — Here's How to Use It
Using React AND Svelte in your micro-frontend? Sharing state between them is a nightmare — unless you use Nanostores . One state library that works everywhere. What Is Nanostores? Nanostores is a tiny state manager (334 bytes!) that works with React, Vue, Svelte, Solid, Angular, and vanilla JS. Same atoms, any framework. Quick Start npm install nanostores @nanostores/react # or @nanostores/vue, etc. // stores/counter.ts — framework-agnostic import { atom , computed } from ' nanostores ' ; export const $count = atom ( 0 ); export const $doubled = computed ( $count , count => count * 2 ); export function increment () { $count . set ( $count . get () + 1 ); } Use in React import { useStore } from ' @nanostores/react ' ; import { $count , $doubled , increment } from ' ../stores/counter ' ; function Counter () { const count = useStore ( $count ); const doubled = useStore ( $doubled ); return ( < div > < p > { count } (doubled: { doubled } ) </ p > < button onClick = { increment } > +1 </ bu
Continue reading on Dev.to JavaScript
Opens in a new tab

