r18gs - npm Package Compare versions

Comparing version 0.0.2 to 0.0.3

CHANGELOG.md

 # r18gs
 
+## 0.0.3
+
+### Patch Changes
+
+- Fix exports; improve examples; Update README
+
 ## 0.0.2
@@ -4,0 +10,0 @@

esm/index.js

@@ -1,1 +0,1 @@
-import{a as e}from"./chunk-3GC5MGOO.js";var r=e;export{r as default};
+import{a as o}from"./chunk-3GC5MGOO.js";var e=o;export{e as default};

index.d.ts

 import useRGS from "./use-rgs";
 export default useRGS;
+export * from "./use-rgs";
 //# sourceMappingURL=index.d.ts.map

package.json

@@ -5,3 +5,3 @@ {
   "private": false,
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "A simple yet elegant, light weight, react18 global store to replace Zustand for better tree shaking.",
@@ -8,0 +8,0 @@ "main": "index.js",

README.md

@@ -45,2 +45,68 @@ # React18GlobalStore
 
+## Usage
+
+Use this hook similar to `useState` hook.
+
+The difference is that you need to pass an unique key - unique across the app to identify
+and make this state accessible to all client components.
+
+```tsx
+const [state, setState] = useRGS<number>("counter", 1);
+```
+
+You can access the same state across all client side components using unique.
+
+> It is recommended to store your keys in separate file to avoid typos and unnecessary conflicts.
+
+### Example
+
+```tsx
+// constants/global-states.ts
+export const COUNTER = "counter";
+```
+
+```tsx
+// components/display.tsx
+"use client";
+
+import useRGS from "r18gs";
+import { COUNTER } from "../constants/global-states";
+
+export default function Display() {
+	const [count] = useRGS<number>(COUNTER);
+	return (
+		<div>
+			<h2>Client component 2</h2>
+			<b>{count}</b>
+		</div>
+	);
+}
+```
+
+```tsx
+// components/counter.tsx
+"use client";
+
+import useRGS from "r18gs";
+import { COUNTER } from "../constants/global-states";
+
+export default function Counter() {
+	const [count, setCount] = useRGS(COUNTER, 0);
+	return (
+		<div>
+			<h2>Clinet component 1</h2>
+			<input
+				onChange={e => {
+					setCount(parseInt(e.target.value.trim()));
+				}}
+				type="number"
+				value={count}
+			/>
+		</div>
+	);
+}
+```
+
+## Contribute
+
 ### Build
@@ -64,2 +130,7 @@
 
+Also, please
+
+1. check out discussion for providing any feedback or sugestions.
+2. Report any issues or feature requests in issues tab
+
 ### 🤩 Don't forger to start [this repo](https://github.com/mayank1513/r18gs)!
@@ -66,0 +137,0 @@

No alert changes

Improved metrics

Total package byte prevSize

10716

increased by16.52%

Lines of code

37

increased by2.78%

Number of lines in readme file

147

increased by93.42%

No dependency changes