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.

Important Announcement

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.

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.

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

or

1const [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.

1// store.ts
2import { create } from "r18gs/dist/with-plugins";
3import { persist } from "r18gs/dist/plugins"; /** You can create your own plugin or import third-party plugins */
4
5export const useMyPersistentCounterStore = create<number>("persistent-counter", 0, [persist()]);

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

1const [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

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