r18gs

React18GlobalStore

🌐 Live Demo with Code: https://r18gs.vercel.app/

Important Note:
There are no breaking changes when upgrading from version 2.0.* to version 3.*. However, we released a major version because version 2.1.0 introduced new APIs. To improve those APIs, we made some breaking changes, which will only affect you if you are using the new features introduced in version 2.1.0.

Motivation

While developing libraries utilizing React 18 features with Zustand, I encountered issues with tree-shaking when importing from specific folders. This caused the creation of multiple Zustand stores, resulting in bugs and unnecessary JavaScript code execution.

To address this, I created a lightweight, minimalistic store designed for shared states that optimizes tree-shaking and supports component imports from separate files.

Features

✅ Full TypeScript Support
✅ Unlock the Full Power of React18 Server Components
✅ Compatible with All React18 Build Systems and Frameworks
✅ Comprehensive Documentation with Typedoc
✅ Examples for Next.js, Vite, and Remix
✅ Seamlessly Works with Selectors

Simple Global State Across Components

Use the useRGS hook just like useState, but with a unique key to make the state accessible across components.

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

Or initialize using a function:

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

🔗 Getting Started: Guide

What's New?

🚀 Now Supports Selectors for Complex Stores
Explore more at https://r18gs.vercel.app/.

Using Plugins

Extend the store's functionality with the create function, withPlugins function, or the useRGSWithPlugins hook. Features like persistence to local storage can be easily integrated.

// store.ts
import { create } from "r18gs/dist/with-plugins";
import { persist } from "r18gs/dist/plugins"; // Use third-party or custom plugins

export const useMyPersistentCounterStore = create<number>("persistent-counter", 0, [persist()]);

Use it just like useState without needing an initial value:

const [persistedCount, setPersistedCount] = useMyPersistentCounterStore();

🔗 Learn More: Leveraging Plugins

Contributing

Contributions are welcome! See contributing.md.

🌟 Don't Forget to Star this repository!

Hands-On Learning Resources

• React and Next.js with TypeScript
• The Game of Chess with Next.js, React, and TypeScript

License

This library is licensed under the MPL-2.0 open-source license.

Support our work by sponsoring or enrolling in our courses.

Made with 💖 by Mayank Kumar Chaudhari