Update REAMDE

README.md

@@ -42,6 +42,72 @@ or
 $ yarn add r18gs
 ```
 
+## 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
 
 To build all apps and packages, run the following command:
@@ -60,6 +126,11 @@ cd r18gs
 pnpm dev
 ```
 
+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)!
 
 Want hands-on course 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 TypeScrypt](https://www.udemy.com/course/game-of-chess-with-nextjs-react-and-typescrypt/?referralCode=851A28F10B254A8523FE)

packages/shared-ui/src/constants/global-states.ts

@@ -0,0 +1 @@
+export const COUNTER = "counter";

packages/shared-ui/src/root/counter.tsx

@@ -1,9 +1,10 @@
 "use client";
 
 import useRGS from "r18gs";
+import { COUNTER } from "../constants/global-states";
 
 export default function Counter() {
-	const [count, setCount] = useRGS("count", 0);
+	const [count, setCount] = useRGS(COUNTER, 0);
 	return (
 		<div>
 			<h2>Clinet component 1</h2>

packages/shared-ui/src/root/display.tsx

@@ -1,9 +1,10 @@
 "use client";
 
 import useRGS from "r18gs";
+import { COUNTER } from "../constants/global-states";
 
 export default function Display() {
-	const [count] = useRGS<number>("count");
+	const [count] = useRGS<number>(COUNTER);
 	return (
 		<div>
 			<h2>Client component 2</h2>