generated from react18-tools/turborepo-template
-
-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
a08848b
commit 31ea129
Showing
31 changed files
with
147 additions
and
194 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| TypeDoc added this file to prevent GitHub Pages from using Jekyll. You can turn off this behavior by setting the `githubPages` option to false. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,101 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <title></title> | ||
| <link type="text/css" rel="stylesheet" href="http://jasonm23.github.com/markdown-css-themes/swiss.css"> | ||
| </head> | ||
| <body> | ||
| <div>Loading...</div> | ||
| <textarea id="mdstr" style=display:none># Quick Start | ||
|
|
||
| Welcome to the quick guide for using this library. | ||
|
|
||
| ## Installation | ||
|
|
||
| To get started, you can install the package via your preferred package manager. Here are a few examples: | ||
|
|
||
| ```bash | ||
| $ pnpm add r18gs | ||
| ``` | ||
|
|
||
| or | ||
|
|
||
| ```bash | ||
| $ npm install r18gs | ||
| ``` | ||
|
|
||
| or | ||
|
|
||
| ```bash | ||
| $ yarn add r18gs | ||
| ``` | ||
|
|
||
| ## Usage | ||
|
|
||
| Utilize this hook similarly to the `useState` hook. However, ensure to pass a 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 a unique key. | ||
|
|
||
| > It's advisable to store your keys in a separate file to prevent 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>Client Component 1</h2> | ||
| <input | ||
| onChange={e => { | ||
| setCount(parseInt(e.target.value.trim())); | ||
| }} | ||
| type="number" | ||
| value={count} | ||
| /> | ||
| </div> | ||
| ); | ||
| } | ||
| ``` | ||
| </textarea> | ||
| <script src="https://raw.github.com/evilstreak/markdown-js/master/lib/markdown.js"></script> | ||
| <script> | ||
| var mdstr = document.getElementById('mdstr').value; | ||
| var html = markdown.toHTML(mdstr); | ||
| document.body.innerHTML = html; | ||
| </script> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.