A simple yet elegant, light weight, react18 global store to replace Zustand for better tree shaking.
npm install react19-store
     !npm bundle size 
I've developed fantastic libraries leveraging React18 features using Zustand, and they performed admirably. However, when attempting to import from specific folders for better tree-shaking, the libraries encountered issues. Each import resulted in a separate Zustand store being created, leading to increased package size.
As a solution, I set out to create a lightweight, bare minimum store that facilitates shared state even when importing components from separate files, optimizing tree-shaking.
The default export from r18gs is deprecated. Please switch to using import { useRGS } from "r18gs" instead. The default export will be removed in the next major release.
✅ Full TypeScript Support
✅ Unleash the full power of React18 Server components
✅ Compatible with all build systems/tools/frameworks for React18
✅ Documented with Typedoc (Docs)
✅ Examples for Next.js, Vite, and Remix
Utilize this hook similarly to the useState hook. However, ensure to pass a unique key, unique across the app, to identify and make this state accessible to all client components.
``tsx`
const [state, setState] = useRGS
_or_
`tsx`
const [state, setState] = useRGS
> For detailed instructions, see Getting Started
Enhance the functionality of the store by leveraging either the create function, withPlugins function, or the useRGSWithPlugins hook from r18gs/dist/with-plugins, enabling features such as storing to local storage, among others.
`tsx
// store.ts
import { create } from "r18gs/dist/with-plugins";
import { persist } from "r18gs/dist/plugins"; /* You can create your own plugin or import third-party plugins /
export const useMyPersistentCounterStore = create
`
Now, you can utilize useMyPersistentCounterStore similarly to useState without specifying an initial value.
`tsx``
const [persistedCount, setPersistedCount] = useMyPersistentCounterStore();
> For detailed instructions, see Leveraging Plugins
See contributing.md
Interested in hands-on courses for getting started with Turborepo? Check out React and Next.js with TypeScript and The Game of Chess with Next.js, React and TypeScript
This library is licensed under the MPL-2.0 open-source license.
>
Please consider enrolling in our courses or sponsoring our work.
with 💖 by Mayank Kumar Chaudhari