generated from react18-tools/turborepo-template
-
-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Apply changesets and update CHANGELOG
- Loading branch information
1 parent
4ab636e
commit 209da08
Showing
1 changed file
with
41 additions
and
32 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,81 +1,90 @@ | ||
| # React18GlobalStore <img src="https://raw.githubusercontent.com/mayank1513/mayank1513/main/popper.png" style="height: 40px"/> | ||
|
|
||
| [](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/) | ||
| [](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. | ||
| > 🌐 **Live Demo with Code**: [https://r18gs.vercel.app/](https://r18gs.vercel.app/) | ||
| 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. | ||
| ## Motivation | ||
|
|
||
| ### Important Announcement | ||
| 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. | ||
|
|
||
| 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. | ||
| 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 | ||
|
|
||
| ✅ Unleash the full power of React18 Server components | ||
|
|
||
| ✅ Compatible with all build systems/tools/frameworks for React18 | ||
| ✅ **Full TypeScript Support** | ||
| ✅ **Unlock the Full Power of React18 Server Components** | ||
| ✅ **Compatible with All React18 Build Systems and Frameworks** | ||
| ✅ **Comprehensive Documentation with [Typedoc](https://react18-tools.github.io/react18-global-store)** | ||
| ✅ **Examples for Next.js, Vite, and Remix** | ||
| ✅ **Seamlessly Works with Selectors** | ||
|
|
||
| ✅ Documented with [Typedoc](https://react18-tools.github.io/react18-global-store) ([Docs](https://react18-tools.github.io/react18-global-store)) | ||
| ## Simple Global State Across Components | ||
|
|
||
| ✅ 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. | ||
| Use the `useRGS` hook just like `useState`, but with a unique key to make the state accessible across components. | ||
|
|
||
| ```tsx | ||
| const [state, setState] = useRGS<number>("counter", 1); | ||
| ``` | ||
|
|
||
| **_or_** | ||
| Or initialize using a function: | ||
|
|
||
| ```tsx | ||
| const [state, setState] = useRGS<number>("counter", () => 1); | ||
| ``` | ||
|
|
||
| > For detailed instructions, see [Getting Started](./md-docs/1.getting-started.md) | ||
| > 🔗 **Getting Started**: [Guide](./md-docs/1.getting-started.md) | ||
| ## What's New? | ||
|
|
||
| 🚀 **Now Supports Selectors for Complex Stores** | ||
| Explore more at [https://r18gs.vercel.app/](https://r18gs.vercel.app/). | ||
|
|
||
| ## 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. | ||
| 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. | ||
|
|
||
| ```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 */ | ||
| import { persist } from "r18gs/dist/plugins"; // Use third-party or custom plugins | ||
|
|
||
| export const useMyPersistentCounterStore = create<number>("persistent-counter", 0, [persist()]); | ||
| ``` | ||
|
|
||
| Now, you can utilize `useMyPersistentCounterStore` similarly to `useState` without specifying an initial value. | ||
| Use it just like `useState` without needing an initial value: | ||
|
|
||
| ```tsx | ||
| const [persistedCount, setPersistedCount] = useMyPersistentCounterStore(); | ||
| ``` | ||
|
|
||
| > For detailed instructions, see [Leveraging Plugins](./md-docs/2.leveraging-plugins.md) | ||
| > 🔗 **Learn More**: [Leveraging Plugins](./md-docs/2.leveraging-plugins.md) | ||
| ## Contributing | ||
|
|
||
| See [contributing.md](/contributing.md) | ||
| Contributions are welcome! See [contributing.md](/contributing.md). | ||
|
|
||
| ### 🌟 Don't Forget to Star [this repository](https://github.com/mayank1513/react18-global-store)! | ||
|
|
||
| ### 🤩 Don't forget to star [this repo](https://github.com/mayank1513/react18-global-store)! | ||
| ### Hands-On Learning Resources | ||
|
|
||
| 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) | ||
| - [React and Next.js with TypeScript](https://mayank-chaudhari.vercel.app/courses/react-and-next-js-with-typescript) | ||
| - [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. | ||
| This library is licensed under the **MPL-2.0** open-source license. | ||
|
|
||
| > <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. | ||
| > <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). | ||
| <hr /> | ||
| --- | ||
|
|
||
| <p align="center" style="text-align:center">with 💖 by <a href="https://mayank-chaudhari.vercel.app" target="_blank">Mayank Kumar Chaudhari</a></p> | ||
| <p align="center" style="text-align:center">Made with 💖 by <a href="https://mayank-chaudhari.vercel.app" target="_blank">Mayank Kumar Chaudhari</a></p> |