From 44a6354b675dcc0d4966cc44b12b36d656718bf5 Mon Sep 17 00:00:00 2001
From: Mayank <mayank.srmu@gmail.com>
Date: Sat, 22 Jun 2024 22:14:20 +0530
Subject: [PATCH] Update Readme and docs

---
 README.md                                   |  4 ++
 lib/tests/use-rgs.test.tsx                  | 42 ++++++++++-----------
 md-docs/1.getting-started.md                |  4 +-
 packages/shared/src/client/demo/counter.tsx |  2 +-
 packages/shared/src/client/demo/demo.tsx    |  2 +-
 5 files changed, 29 insertions(+), 25 deletions(-)

diff --git a/README.md b/README.md
index d009ad25..d42ccd34 100644
--- a/README.md
+++ b/README.md
@@ -8,6 +8,10 @@ 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.
 
+### Important Announcement
+
+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.
+
 ## Features
 
 ✅ Full TypeScript Support
diff --git a/lib/tests/use-rgs.test.tsx b/lib/tests/use-rgs.test.tsx
index ceec4e18..829a2fa8 100644
--- a/lib/tests/use-rgs.test.tsx
+++ b/lib/tests/use-rgs.test.tsx
@@ -1,6 +1,6 @@
 import { describe, test } from "vitest";
 import { act, fireEvent, render, screen } from "@testing-library/react";
-import useRGS from "../src";
+import { useRGS } from "../src";
 import { ChangeEvent, useCallback } from "react";
 
 const COUNT_RGS_KEY = "count";
@@ -8,30 +8,30 @@ const TESTID_INPUT = "in1";
 const TESTID_DISPLAY = "d1";
 
 function Component1() {
-	const [count, setCount] = useRGS<number>(COUNT_RGS_KEY, 0);
-	const handleChange = useCallback(
-		(e: ChangeEvent<HTMLInputElement>) => {
-			setCount(parseInt(e.target.value));
-		},
-		[setCount],
-	);
-	return (
-		<div>
-			<input data-testid={TESTID_INPUT} onChange={handleChange} type="number" value={count} />
-		</div>
-	);
+  const [count, setCount] = useRGS<number>(COUNT_RGS_KEY, 0);
+  const handleChange = useCallback(
+    (e: ChangeEvent<HTMLInputElement>) => {
+      setCount(parseInt(e.target.value));
+    },
+    [setCount],
+  );
+  return (
+    <div>
+      <input data-testid={TESTID_INPUT} onChange={handleChange} type="number" value={count} />
+    </div>
+  );
 }
 
 function Component2() {
-	const [count] = useRGS<number>(COUNT_RGS_KEY);
-	return <h1 data-testid={TESTID_DISPLAY}>{count}</h1>;
+  const [count] = useRGS<number>(COUNT_RGS_KEY);
+  return <h1 data-testid={TESTID_DISPLAY}>{count}</h1>;
 }
 
 describe("React18GlobalStore", () => {
-	test("check state update to multiple components", async ({ expect }) => {
-		render(<Component1 />);
-		render(<Component2 />);
-		await act(() => fireEvent.input(screen.getByTestId(TESTID_INPUT), { target: { value: 5 } }));
-		expect(screen.getByTestId(TESTID_DISPLAY).textContent).toBe("5");
-	});
+  test("check state update to multiple components", async ({ expect }) => {
+    render(<Component1 />);
+    render(<Component2 />);
+    await act(() => fireEvent.input(screen.getByTestId(TESTID_INPUT), { target: { value: 5 } }));
+    expect(screen.getByTestId(TESTID_DISPLAY).textContent).toBe("5");
+  });
 });
diff --git a/md-docs/1.getting-started.md b/md-docs/1.getting-started.md
index 6ec8f719..aff1dabb 100644
--- a/md-docs/1.getting-started.md
+++ b/md-docs/1.getting-started.md
@@ -55,7 +55,7 @@ export const COUNTER = "counter";
 // components/display.tsx
 "use client";
 
-import useRGS from "r18gs";
+import { useRGS } from "r18gs";
 import { COUNTER } from "../constants/global-states";
 
 export default function Display() {
@@ -73,7 +73,7 @@ export default function Display() {
 // components/counter.tsx
 "use client";
 
-import useRGS from "r18gs";
+import { useRGS } from "r18gs";
 import { COUNTER } from "../constants/global-states";
 
 export default function Counter() {
diff --git a/packages/shared/src/client/demo/counter.tsx b/packages/shared/src/client/demo/counter.tsx
index 4b8f44ad..8d76a781 100644
--- a/packages/shared/src/client/demo/counter.tsx
+++ b/packages/shared/src/client/demo/counter.tsx
@@ -1,4 +1,4 @@
-import useRGS from "r18gs";
+import { useRGS } from "r18gs";
 
 const RGS_COUNTER_KEY = "counter";
 
diff --git a/packages/shared/src/client/demo/demo.tsx b/packages/shared/src/client/demo/demo.tsx
index ca71e0a7..8b1bc2f2 100644
--- a/packages/shared/src/client/demo/demo.tsx
+++ b/packages/shared/src/client/demo/demo.tsx
@@ -4,7 +4,7 @@ import { CounterController, CounterDisplay } from "./counter";
 import styles from "./demo.module.scss";
 import { Editor } from "react-live";
 
-const code = `import useRGS from "r18gs";
+const code = `import { useRGS } from "r18gs";
 
 const MY_KEY = "counter";