Update Readme and docs

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

lib/tests/use-rgs.test.tsx

@@ -1,37 +1,37 @@
 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";
 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");
+  });
 });

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() {

packages/shared/src/client/demo/counter.tsx

@@ -1,4 +1,4 @@
-import useRGS from "r18gs";
+import { useRGS } from "r18gs";
 
 const RGS_COUNTER_KEY = "counter";
 

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";