From 95086619a5f9c182f5e6306aebfc7dcdb0608494 Mon Sep 17 00:00:00 2001 From: Mayank Date: Thu, 22 Feb 2024 14:10:32 +0000 Subject: [PATCH 1/3] fix exports --- lib/r18gs/index.ts | 2 ++ lib/r18gs/src/index.ts | 2 ++ 2 files changed, 4 insertions(+) diff --git a/lib/r18gs/index.ts b/lib/r18gs/index.ts index 25549d57..e5de85df 100644 --- a/lib/r18gs/index.ts +++ b/lib/r18gs/index.ts @@ -1,3 +1,5 @@ import useRGS from "./src"; export default useRGS; + +export * from "./src"; diff --git a/lib/r18gs/src/index.ts b/lib/r18gs/src/index.ts index 770d1d9c..06fe8d72 100644 --- a/lib/r18gs/src/index.ts +++ b/lib/r18gs/src/index.ts @@ -1,3 +1,5 @@ import useRGS from "./use-rgs"; export default useRGS; + +export * from "./use-rgs"; From 3a68a18bbb687975d06e5b5704c856420529f52d Mon Sep 17 00:00:00 2001 From: Mayank Date: Thu, 22 Feb 2024 17:59:38 +0000 Subject: [PATCH 2/3] Update REAMDE --- README.md | 71 +++++++++++++++++++ .../shared-ui/src/constants/global-states.ts | 1 + packages/shared-ui/src/root/counter.tsx | 3 +- packages/shared-ui/src/root/display.tsx | 3 +- 4 files changed, 76 insertions(+), 2 deletions(-) create mode 100644 packages/shared-ui/src/constants/global-states.ts diff --git a/README.md b/README.md index 27299853..6dd4d597 100644 --- a/README.md +++ b/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("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(COUNTER); + return ( +
+

Client component 2

+ {count} +
+ ); +} +``` + +```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 ( +
+

Clinet component 1

+ { + setCount(parseInt(e.target.value.trim())); + }} + type="number" + value={count} + /> +
+ ); +} +``` + +## 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) diff --git a/packages/shared-ui/src/constants/global-states.ts b/packages/shared-ui/src/constants/global-states.ts new file mode 100644 index 00000000..e4d5d026 --- /dev/null +++ b/packages/shared-ui/src/constants/global-states.ts @@ -0,0 +1 @@ +export const COUNTER = "counter"; \ No newline at end of file diff --git a/packages/shared-ui/src/root/counter.tsx b/packages/shared-ui/src/root/counter.tsx index b995d660..8c4da3c4 100644 --- a/packages/shared-ui/src/root/counter.tsx +++ b/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 (

Clinet component 1

diff --git a/packages/shared-ui/src/root/display.tsx b/packages/shared-ui/src/root/display.tsx index ece0cf87..e89d757d 100644 --- a/packages/shared-ui/src/root/display.tsx +++ b/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("count"); + const [count] = useRGS(COUNTER); return (

Client component 2

From ed403aa885d238df3887e814faf3630cb50a53e1 Mon Sep 17 00:00:00 2001 From: Mayank Date: Thu, 22 Feb 2024 18:00:40 +0000 Subject: [PATCH 3/3] Changelog --- examples/nextjs/CHANGELOG.md | 8 ++++++++ examples/nextjs/package.json | 2 +- examples/remix/CHANGELOG.md | 8 ++++++++ examples/remix/package.json | 2 +- examples/vite/CHANGELOG.md | 8 ++++++++ examples/vite/package.json | 2 +- lib/r18gs/CHANGELOG.md | 6 ++++++ lib/r18gs/package.json | 2 +- 8 files changed, 34 insertions(+), 4 deletions(-) diff --git a/examples/nextjs/CHANGELOG.md b/examples/nextjs/CHANGELOG.md index 544fe7e0..add0492f 100644 --- a/examples/nextjs/CHANGELOG.md +++ b/examples/nextjs/CHANGELOG.md @@ -1,5 +1,13 @@ # nextjs-example +## 0.0.3 + +### Patch Changes + +- Updated dependencies + - r18gs@0.0.3 + - shared-ui@0.0.0 + ## 0.0.2 ### Patch Changes diff --git a/examples/nextjs/package.json b/examples/nextjs/package.json index e4101c3e..b27e59f6 100644 --- a/examples/nextjs/package.json +++ b/examples/nextjs/package.json @@ -1,6 +1,6 @@ { "name": "nextjs-example", - "version": "0.0.2", + "version": "0.0.3", "private": true, "scripts": { "dev": "next dev", diff --git a/examples/remix/CHANGELOG.md b/examples/remix/CHANGELOG.md index b4043950..a5547db1 100644 --- a/examples/remix/CHANGELOG.md +++ b/examples/remix/CHANGELOG.md @@ -1,5 +1,13 @@ # remix-example +## 0.0.3 + +### Patch Changes + +- Updated dependencies + - r18gs@0.0.3 + - shared-ui@0.0.0 + ## 0.0.2 ### Patch Changes diff --git a/examples/remix/package.json b/examples/remix/package.json index fb1d275c..1c3c6f98 100644 --- a/examples/remix/package.json +++ b/examples/remix/package.json @@ -1,6 +1,6 @@ { "name": "remix-example", - "version": "0.0.2", + "version": "0.0.3", "private": true, "sideEffects": false, "type": "module", diff --git a/examples/vite/CHANGELOG.md b/examples/vite/CHANGELOG.md index b3853a4b..fd45b662 100644 --- a/examples/vite/CHANGELOG.md +++ b/examples/vite/CHANGELOG.md @@ -1,5 +1,13 @@ # vite-example +## 0.0.3 + +### Patch Changes + +- Updated dependencies + - r18gs@0.0.3 + - shared-ui@0.0.0 + ## 0.0.2 ### Patch Changes diff --git a/examples/vite/package.json b/examples/vite/package.json index ab53df73..a910ef26 100644 --- a/examples/vite/package.json +++ b/examples/vite/package.json @@ -1,7 +1,7 @@ { "name": "vite-example", "private": true, - "version": "0.0.2", + "version": "0.0.3", "type": "module", "scripts": { "dev": "vite --port 3001", diff --git a/lib/r18gs/CHANGELOG.md b/lib/r18gs/CHANGELOG.md index 95916232..439e8f26 100644 --- a/lib/r18gs/CHANGELOG.md +++ b/lib/r18gs/CHANGELOG.md @@ -1,5 +1,11 @@ # r18gs +## 0.0.3 + +### Patch Changes + +- Fix exports; improve examples; Update README + ## 0.0.2 ### Patch Changes diff --git a/lib/r18gs/package.json b/lib/r18gs/package.json index 645f19d2..019b5f8b 100644 --- a/lib/r18gs/package.json +++ b/lib/r18gs/package.json @@ -2,7 +2,7 @@ "name": "r18gs", "author": "Mayank Kumar Chaudhari ", "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.", "main": "./index.ts", "types": "./index.ts",