React18 Global Store
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
License
This library is licensed under the MPL-2.0 open-source license.
Made with 💖 by Mayank Kumar Chaudhari