Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/react18-tools/react18-global-store
A simple yet elegant, light weight, react18 global store to replace Zustand for better tree shaking.
https://github.com/react18-tools/react18-global-store
javascript mayank1513 nextjs nextjs14 react react-library react18 react18-global-store tree-shaking turborepo-template typescript zustand
Last synced: 2 months ago
JSON representation
A simple yet elegant, light weight, react18 global store to replace Zustand for better tree shaking.
- Host: GitHub
- URL: https://github.com/react18-tools/react18-global-store
- Owner: react18-tools
- License: mpl-2.0
- Created: 2024-02-21T09:15:49.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2024-10-29T08:21:25.000Z (3 months ago)
- Last Synced: 2024-10-29T09:42:31.442Z (3 months ago)
- Topics: javascript, mayank1513, nextjs, nextjs14, react, react-library, react18, react18-global-store, tree-shaking, turborepo-template, typescript, zustand
- Language: TypeScript
- Homepage: https://r18gs.vercel.app/
- Size: 4.61 MB
- Stars: 6
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: contributing.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Security: SECURITY.md
Awesome Lists containing this project
README
# React18GlobalStore 
[](https://github.com/react18-tools/react18-global-store/actions/workflows/test.yml) [](https://codeclimate.com/github/react18-tools/react18-global-store/maintainability) [](https://codecov.io/gh/react18-tools/react18-global-store) [](https://www.npmjs.com/package/r18gs) [](https://www.npmjs.com/package/r18gs)  [](https://gitpod.io/from-referrer/)
## 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](https://github.com/react18-tools/react18-global-store/discussions/31). 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](https://react18-tools.github.io/react18-global-store) ([Docs](https://react18-tools.github.io/react18-global-store))
✅ 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.
```tsx
const [state, setState] = useRGS("counter", 1);
```
**_or_**
```tsx
const [state, setState] = useRGS("counter", () => 1);
```
> For detailed instructions, see [Getting Started](./md-docs/1.getting-started.md)
## 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.
```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("persistent-counter", 0, [persist()]);
```
Now, you can utilize `useMyPersistentCounterStore` similarly to `useState` without specifying an initial value.
```tsx
const [persistedCount, setPersistedCount] = useMyPersistentCounterStore();
```
> For detailed instructions, see [Leveraging Plugins](./md-docs/2.leveraging-plugins.md)
## Contributing
See [contributing.md](/contributing.md)
### 🤩 Don't forget to star [this repo](https://github.com/mayank1513/react18-global-store)!
Interested in hands-on courses for getting started with Turborepo? Check out [React and Next.js with TypeScript](https://mayank-chaudhari.vercel.app/courses/react-and-next-js-with-typescript) and [The Game of Chess with Next.js, React and TypeScript](https://www.udemy.com/course/game-of-chess-with-nextjs-react-and-typescript/?referralCode=851A28F10B254A8523FE)
## License
This library is licensed under the MPL-2.0 open-source license.
> Please consider enrolling in [our courses](https://mayank-chaudhari.vercel.app/courses) or [sponsoring](https://github.com/sponsors/mayank1513) our work.
with 💖 by Mayank Kumar Chaudhari