From 6128f30053f2353cbd263898345bcaca47eaeaed Mon Sep 17 00:00:00 2001 From: Mayank Date: Thu, 13 Jun 2024 07:21:59 +0530 Subject: [PATCH] Updaet readme --- README.md | 9 +++++++++ md-docs/1.getting-started.md | 10 ++++++++++ 2 files changed, 19 insertions(+) diff --git a/README.md b/README.md index 082bdb44..2596ffe4 100644 --- a/README.md +++ b/README.md @@ -8,6 +8,9 @@ I've developed fantastic libraries leveraging React18 features using Zustand, an 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. +> If you need fully featured state management solution, consider using Zustand with [`treeshakable`](https://github.com/react18-tools/treeshakable/) +> To understand the issue with treeshakability and importing from subpath, see - + ## Features ✅ Full TypeScript Support @@ -28,6 +31,12 @@ Utilize this hook similarly to the `useState` hook. However, ensure to pass a un 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 diff --git a/md-docs/1.getting-started.md b/md-docs/1.getting-started.md index e1d28c0d..e951f864 100644 --- a/md-docs/1.getting-started.md +++ b/md-docs/1.getting-started.md @@ -34,6 +34,16 @@ You can access the same state across all client-side components using a unique k > It's advisable to store your keys in a separate file to prevent typos and unnecessary conflicts. +### Initializing the state with a function + +In some cases you might want to initialize the state with a function, for example, when reading from `localStorage`. We support initializer function as well. + +```tsx +const [state, setState] = useRGS("counter", () => + typeof localStorage === "undefined" ? 1 : localStorage.getItem("counter") ?? 1, +); +``` + ### Example ```tsx