Home

React18GlobalStore

Motivation

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.

If you need fully featured state management solution, consider using Zustand with treeshakable To understand the issue with treeshakability and importing from subpath, see - https://treeshakable.vercel.app

Features

✅ 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

Simple Global State Shared Across Multiple Components

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.

const [state, setState] = useRGS<number>("counter", 1);

or

const [state, setState] = useRGS<number>("counter", () => 1);

For detailed instructions, see Getting Started

Using Plugins

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.

// 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<number>("persistent-counter", 0, [persist()]);

Now, you can utilize useMyPersistentCounterStore similarly to useState without specifying an initial value.

const [persistedCount, setPersistedCount] = useMyPersistentCounterStore();

For detailed instructions, see Leveraging Plugins

Contributing

See contributing.md

🤩 Don't forget to star this repo!

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

License

Licensed under the MPL 2.0 open source license.

---

with 💖 by Mayank Kumar Chaudhari