Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix-exports #4

Merged
merged 3 commits into from
Feb 22, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
71 changes: 71 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand All @@ -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)
Expand Down
8 changes: 8 additions & 0 deletions examples/nextjs/CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,13 @@
# nextjs-example

## 0.0.3

### Patch Changes

- Updated dependencies
- [email protected]
- [email protected]

## 0.0.2

### Patch Changes
Expand Down
2 changes: 1 addition & 1 deletion examples/nextjs/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "nextjs-example",
"version": "0.0.2",
"version": "0.0.3",
"private": true,
"scripts": {
"dev": "next dev",
Expand Down
8 changes: 8 additions & 0 deletions examples/remix/CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,13 @@
# remix-example

## 0.0.3

### Patch Changes

- Updated dependencies
- [email protected]
- [email protected]

## 0.0.2

### Patch Changes
Expand Down
2 changes: 1 addition & 1 deletion examples/remix/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "remix-example",
"version": "0.0.2",
"version": "0.0.3",
"private": true,
"sideEffects": false,
"type": "module",
Expand Down
8 changes: 8 additions & 0 deletions examples/vite/CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,13 @@
# vite-example

## 0.0.3

### Patch Changes

- Updated dependencies
- [email protected]
- [email protected]

## 0.0.2

### Patch Changes
Expand Down
2 changes: 1 addition & 1 deletion examples/vite/package.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "vite-example",
"private": true,
"version": "0.0.2",
"version": "0.0.3",
"type": "module",
"scripts": {
"dev": "vite --port 3001",
Expand Down
6 changes: 6 additions & 0 deletions lib/r18gs/CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,11 @@
# r18gs

## 0.0.3

### Patch Changes

- Fix exports; improve examples; Update README

## 0.0.2

### Patch Changes
Expand Down
2 changes: 2 additions & 0 deletions lib/r18gs/index.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import useRGS from "./src";

export default useRGS;

export * from "./src";
2 changes: 1 addition & 1 deletion lib/r18gs/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
"name": "r18gs",
"author": "Mayank Kumar Chaudhari <https://mayank-chaudhari.vercel.app>",
"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",
Expand Down
2 changes: 2 additions & 0 deletions lib/r18gs/src/index.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import useRGS from "./use-rgs";

export default useRGS;

export * from "./use-rgs";
1 change: 1 addition & 0 deletions packages/shared-ui/src/constants/global-states.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export const COUNTER = "counter";
3 changes: 2 additions & 1 deletion packages/shared-ui/src/root/counter.tsx
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
3 changes: 2 additions & 1 deletion packages/shared-ui/src/root/display.tsx
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
Loading