Function useRGS
+
Function persist
A plugin that persists and syncs RGS store between tabs.
+- persist<T>(options?: PersistOptions): Plugin<T>
Type Parameters
Parameters
Optionaloptions: PersistOptions
Returns Plugin<T>
A plugin that persists and syncs a value between tabs.
+
Function createHook
Extract coomon create hook logic to utils
-- create
Hook<T>(key): [T, SetStateAction<T>] Type Parameters
Parameters
- key: string
Returns [T, SetStateAction<T>]
Function createHook
Extract coomon create hook logic to utils
+- createHook<T>(key: string): [T, SetStateAction<T>]
Type Parameters
Parameters
- key: string
Returns [T, SetStateAction<T>]
Function createSetter
setter function to set the state.
-- create
Setter<T>(key): SetStateAction<unknown> Type Parameters
Parameters
- key: string
Returns SetStateAction<unknown>
Function createSetter
setter function to set the state.
+- createSetter<T>(key: string): SetStateAction<unknown>
Type Parameters
Parameters
- key: string
Returns SetStateAction<unknown>
Function createSubcriber
craete subscriber function to subscribe to the store.
-- create
Subcriber(key): Subscriber Parameters
- key: string
Returns Subscriber
Function createSubcriber
craete subscriber function to subscribe to the store.
+- createSubcriber(key: string): Subscriber
Parameters
- key: string
Returns Subscriber
+
Function initWithPlugins
Initialize the named store when invoked for the first time.
+Function useRGSWithPlugins
Use this hook similar to useState hook.
+
Function useRGSWithPlugins
Use this hook similar to useState hook.
The difference is that you need to pass a
unique key - unique across the app to make
this state accessible to all client components.
- useRGSWith
Plugins<T>(key, value?, plugins?, doNotInit?): [T, SetStateAction<T>] Type Parameters
- useRGSWithPlugins<T>(
    key: string,
    value?: ValueType<T>,
    plugins?: Plugin<T>[],
    doNotInit?: boolean,
): [T, SetStateAction<T>] Type Parameters
Parameters
- key: string
Unique key to identify the store.
+ Optionalvalue: ValueType<T>Initial value of the store.
+Optionalplugins: Plugin<T>[]Plugins to be applied to the store.
- doNotInit: boolean = false
Do not initialize the store. Useful when you want to initialize the store later. Note that the setter function is not available until the store is initialized.
-
Returns [T, SetStateAction<T>]
-
+
- key: string
Returns [T, SetStateAction<T>]
- A tuple (Ordered sequance of values) containing the state and a function to set the state.
Function create
Creates a store with plugins.
+- create<T>(
    key: string,
    value?: T,
    plugins?: Plugin<T>[],
): () => [T, SetStateAction<T>] Type Parameters
Parameters
Returns () => [T, SetStateAction<T>]
-
+
- A hook function that returns a tuple (Ordered sequence of values) containing the state and a function to set the state. +
Function withPlugins
Creates a hook similar to useRGS, but with plugins to be applied on first invocation.
+- withPlugins<T>(
    plugins: Plugin<T>[],
): <U = T>(
    key: string,
    value?: U,
    doNotInit?: boolean,
) => [U, SetStateAction<U>] Type Parameters
Returns <U = T>(key: string, value?: U, doNotInit?: boolean) => [U, SetStateAction<U>]
A hook that automatically initializes the store (if not already initialized) with the given plugins.
+
Function create
Creates a store with plugins.
-- create<T>(key, value?, plugins?): (() => [T, SetStateAction<T>])
Type Parameters
Parameters
Returns (() => [T, SetStateAction<T>])
-
-
- A hook function that returns a tuple (Ordered sequence of values) containing the state and a function to set the state. -
- (): [T, SetStateAction<T>]
Returns [T, SetStateAction<T>]
Function withPlugins
Creates a hook similar to useRGS, but with plugins to be applied on first invocation.
-- with
Plugins<T>(plugins): (<U>(key: string, value?: U, doNotInit?: boolean) => [U, SetStateAction<U>]) Type Parameters
Returns (<U>(key: string, value?: U, doNotInit?: boolean) => [U, SetStateAction<U>])
A hook that automatically initializes the store (if not already initialized) with the given plugins.
-- <U>(key, value?, doNotInit?): [U, SetStateAction<U>]
Type Parameters
- U = T
Parameters
- key: string
Optionalvalue: UOptionaldoNotInit: boolean
Returns [U, SetStateAction<U>]
React18 Global Store
React18GlobalStore 
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.
+React18 Global Store
React18GlobalStore
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. Please switch to using import { useRGS } from "r18gs" instead. The default export will be removed in the next major release.
Features
✅ Full TypeScript Support
+Important Announcement
The default export from r18gs is deprecated. 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 (Docs)
✅ 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.
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.
const [state, setState] = useRGS<number>("counter", 1);
-For detailed instructions, see Getting Started
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.
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.
// 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<number>("persistent-counter", 0, [persist()]);
-For detailed instructions, see Leveraging Plugins
Contributing
See contributing.md
-🤩 Don't forget to star this repo!
Interested in hands-on courses for getting started with Turborepo? Check out React and Next.js with TypeScript and The Game of Chess with Next.js, React and TypeScript
+Contributing
See contributing.md
+🤩 Don't forget to star this repo!
Interested in hands-on courses for getting started with Turborepo? Check out React and Next.js with TypeScript and The Game of Chess with Next.js, React and TypeScript
License
This library is licensed under the MPL-2.0 open-source license.
+License
This library is licensed under the MPL-2.0 open-source license.
Please consider enrolling in our courses or sponsoring our work.
-
with 💖 by Mayank Kumar Chaudhari
with 💖 by Mayank Kumar Chaudhari
diff --git a/docs/modules.html b/docs/modules.html
index 8649102ab..ad347c7b8 100644
--- a/docs/modules.html
+++ b/docs/modules.html
@@ -1,6 +1 @@
-
React18 Global Store
Index
Modules
React18 Global Store
Module index
Index
References
Functions
useRGS
-
References
Plugin
Re-exports PluginSet
Re-exports SetStateActionSetter
Re-exports SetterArgTypeModule index
Functions
References
- Plugin → Plugin
- SetStateAction → SetStateAction
- SetterArgType → SetterArgType
Module plugins
Index
References
References
persist
Re-exports persistPersist
Re-exports PersistOptionsModule plugins
References
- persist → persist
- PersistOptions → PersistOptions
Module plugins/persist
Index
Interfaces
Functions
persist
-
diff --git a/docs/modules/utils._internal_.html b/docs/modules/utils._internal_.html
index a161e46d5..bae038888 100644
--- a/docs/modules/utils._internal_.html
+++ b/docs/modules/utils._internal_.html
@@ -1,5 +1 @@
-
Module <internal>
Index
Type Aliases
Module <internal>
Type Aliases
Module utils
Index
Modules
Type Aliases
Variables
Functions
Module utils
Modules
Type Aliases
Variables
diff --git a/docs/modules/with_plugins.html b/docs/modules/with_plugins.html
deleted file mode 100644
index 6e41448ba..000000000
--- a/docs/modules/with_plugins.html
+++ /dev/null
@@ -1,4 +0,0 @@
-
Module with-plugins
Index
References
Functions
References
useRGSWith
Re-exports useRGSWithPlugins
+
diff --git a/docs/types/utils.SetStateAction.html b/docs/types/utils.SetStateAction.html
index 9d1072b85..697c54bf5 100644
--- a/docs/types/utils.SetStateAction.html
+++ b/docs/types/utils.SetStateAction.html
@@ -1 +1 @@
-
+
diff --git a/docs/types/utils.SetterArgType.html b/docs/types/utils.SetterArgType.html
index fd5d33431..67ddf9cef 100644
--- a/docs/types/utils.SetterArgType.html
+++ b/docs/types/utils.SetterArgType.html
@@ -1 +1 @@
-
Type Alias Listener
Listener: (() => void)
Type Alias Listener
Listener: () => void
diff --git a/docs/types/utils._internal_.RGS.html b/docs/types/utils._internal_.RGS.html
index 544224cb6..47ce3a715 100644
--- a/docs/types/utils._internal_.RGS.html
+++ b/docs/types/utils._internal_.RGS.html
@@ -1,2 +1,2 @@
-
Type Alias RGS
RGS: {
    l: Listener[];
    s: SetStateAction<unknown> | null;
    u: Subscriber;
    v: unknown;
}
    l: Listener[];
    s: SetStateAction<unknown> | null;
    u: Subscriber;
    v: unknown;
}
This is a hack to reduce lib size + readability + not encouraging direct access to globalThis
-Type Alias RGS
RGS: {
    l: Listener[];
    s: SetStateAction<unknown> | null;
    u: Subscriber;
    v: unknown;
}
    l: Listener[];
    s: SetStateAction<unknown> | null;
    u: Subscriber;
    v: unknown;
}
This is a hack to reduce lib size + readability + not encouraging direct access to globalThis
+Type Alias Subscriber
Type Alias Subscriber
+
Use this hook similar to
useStatehook. +- Preparing search index...
- The search index is not available
React18 Global StoreFunction useRGS
Use this hook similar to
-useStatehook. The difference is that you need to pass a unique key - unique across the app to make this state accessible to all client components.Example
Example
-Type Parameters
Parameters
Unique key to identify the store.
-Optionalvalue: ValueType<T>Initial value of the store.
-Returns [T, SetStateAction<T>]
+
Type Parameters
Parameters
Unique key to identify the store.
+Optionalvalue: ValueType<T>Initial value of the store.
+Returns [T, SetStateAction<T>]
- A tuple (Ordered sequance of values) containing the state and a function to set the state.
-Settings