|
1 | 1 | # React18GlobalStore <img src="https://raw.githubusercontent.com/mayank1513/mayank1513/main/popper.png" style="height: 40px"/>
|
2 | 2 |
|
3 |
| -[](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/) |
| 3 | +[](https://github.com/react18-tools/react18-global-store/actions/workflows/test.yml) |
| 4 | +[](https://codeclimate.com/github/react18-tools/react18-global-store/maintainability) |
| 5 | +[](https://codecov.io/gh/react18-tools/react18-global-store) |
| 6 | +[](https://www.npmjs.com/package/r18gs) |
| 7 | +[](https://www.npmjs.com/package/r18gs) |
| 8 | + |
| 9 | +[](https://gitpod.io/from-referrer/) |
4 | 10 |
|
5 |
| -## Motivation |
6 |
| - |
7 |
| -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. |
| 11 | +> 🌐 **Live Demo with Code**: [https://r18gs.vercel.app/](https://r18gs.vercel.app/) |
8 | 12 |
|
9 |
| -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. |
| 13 | +## Motivation |
10 | 14 |
|
11 |
| -### Important Announcement |
| 15 | +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. |
12 | 16 |
|
13 |
| -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. |
| 17 | +To address this, I created a lightweight, minimalistic store designed for shared states that optimizes tree-shaking and supports component imports from separate files. |
14 | 18 |
|
15 | 19 | ## Features
|
16 | 20 |
|
17 |
| -✅ Full TypeScript Support |
18 |
| - |
19 |
| -✅ Unleash the full power of React18 Server components |
20 |
| - |
21 |
| -✅ Compatible with all build systems/tools/frameworks for React18 |
| 21 | +✅ **Full TypeScript Support** |
| 22 | +✅ **Unlock the Full Power of React18 Server Components** |
| 23 | +✅ **Compatible with All React18 Build Systems and Frameworks** |
| 24 | +✅ **Comprehensive Documentation with [Typedoc](https://react18-tools.github.io/react18-global-store)** |
| 25 | +✅ **Examples for Next.js, Vite, and Remix** |
| 26 | +✅ **Seamlessly Works with Selectors** |
22 | 27 |
|
23 |
| -✅ Documented with [Typedoc](https://react18-tools.github.io/react18-global-store) ([Docs](https://react18-tools.github.io/react18-global-store)) |
| 28 | +## Simple Global State Across Components |
24 | 29 |
|
25 |
| -✅ Examples for Next.js, Vite, and Remix |
26 |
| - |
27 |
| -## Simple Global State Shared Across Multiple Components |
28 |
| - |
29 |
| -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. |
| 30 | +Use the `useRGS` hook just like `useState`, but with a unique key to make the state accessible across components. |
30 | 31 |
|
31 | 32 | ```tsx
|
32 | 33 | const [state, setState] = useRGS<number>("counter", 1);
|
33 | 34 | ```
|
34 | 35 |
|
35 |
| -**_or_** |
| 36 | +Or initialize using a function: |
36 | 37 |
|
37 | 38 | ```tsx
|
38 | 39 | const [state, setState] = useRGS<number>("counter", () => 1);
|
39 | 40 | ```
|
40 | 41 |
|
41 |
| -> For detailed instructions, see [Getting Started](./md-docs/1.getting-started.md) |
| 42 | +> 🔗 **Getting Started**: [Guide](./md-docs/1.getting-started.md) |
| 43 | +
|
| 44 | +## What's New? |
| 45 | + |
| 46 | +🚀 **Now Supports Selectors for Complex Stores** |
| 47 | +Explore more at [https://r18gs.vercel.app/](https://r18gs.vercel.app/). |
42 | 48 |
|
43 | 49 | ## Using Plugins
|
44 | 50 |
|
45 |
| -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. |
| 51 | +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. |
46 | 52 |
|
47 | 53 | ```tsx
|
48 | 54 | // store.ts
|
49 | 55 | import { create } from "r18gs/dist/with-plugins";
|
50 |
| -import { persist } from "r18gs/dist/plugins"; /** You can create your own plugin or import third-party plugins */ |
| 56 | +import { persist } from "r18gs/dist/plugins"; // Use third-party or custom plugins |
51 | 57 |
|
52 | 58 | export const useMyPersistentCounterStore = create<number>("persistent-counter", 0, [persist()]);
|
53 | 59 | ```
|
54 | 60 |
|
55 |
| -Now, you can utilize `useMyPersistentCounterStore` similarly to `useState` without specifying an initial value. |
| 61 | +Use it just like `useState` without needing an initial value: |
56 | 62 |
|
57 | 63 | ```tsx
|
58 | 64 | const [persistedCount, setPersistedCount] = useMyPersistentCounterStore();
|
59 | 65 | ```
|
60 | 66 |
|
61 |
| -> For detailed instructions, see [Leveraging Plugins](./md-docs/2.leveraging-plugins.md) |
| 67 | +> 🔗 **Learn More**: [Leveraging Plugins](./md-docs/2.leveraging-plugins.md) |
62 | 68 |
|
63 | 69 | ## Contributing
|
64 | 70 |
|
65 |
| -See [contributing.md](/contributing.md) |
| 71 | +Contributions are welcome! See [contributing.md](/contributing.md). |
| 72 | + |
| 73 | +### 🌟 Don't Forget to Star [this repository](https://github.com/mayank1513/react18-global-store)! |
66 | 74 |
|
67 |
| -### 🤩 Don't forget to star [this repo](https://github.com/mayank1513/react18-global-store)! |
| 75 | +### Hands-On Learning Resources |
68 | 76 |
|
69 |
| -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) |
| 77 | +- [React and Next.js with TypeScript](https://mayank-chaudhari.vercel.app/courses/react-and-next-js-with-typescript) |
| 78 | +- [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) |
70 | 79 |
|
71 |
| - |
| 80 | + |
72 | 81 |
|
73 | 82 | ## License
|
74 | 83 |
|
75 |
| -This library is licensed under the MPL-2.0 open-source license. |
| 84 | +This library is licensed under the **MPL-2.0** open-source license. |
76 | 85 |
|
77 |
| -> <img src="https://raw.githubusercontent.com/mayank1513/mayank1513/main/popper.png" style="height: 20px"/> Please consider enrolling in [our courses](https://mayank-chaudhari.vercel.app/courses) or [sponsoring](https://github.com/sponsors/mayank1513) our work. |
| 86 | +> <img src="https://raw.githubusercontent.com/mayank1513/mayank1513/main/popper.png" style="height: 20px"/> Support our work by [sponsoring](https://github.com/sponsors/mayank1513) or enrolling in [our courses](https://mayank-chaudhari.vercel.app/courses). |
78 | 87 |
|
79 |
| -<hr /> |
| 88 | +--- |
80 | 89 |
|
81 |
| -<p align="center" style="text-align:center">with 💖 by <a href="https://mayank-chaudhari.vercel.app" target="_blank">Mayank Kumar Chaudhari</a></p> |
| 90 | +<p align="center" style="text-align:center">Made with 💖 by <a href="https://mayank-chaudhari.vercel.app" target="_blank">Mayank Kumar Chaudhari</a></p> |
0 commit comments