r18gs

React18GlobalStore

Motivation

I have built wonderful libraries utilizing React18 features using Zustand. They worked awesome. However, when I try importing from specific folder for better tree-shaking, the libraries fail. This is because, for each import a separate zustand store is created. This actually increases the package size also.

Thus, I decided to create a bare minimum, ultra-light store that creates shared state even while importing components from separate files for better treeshaking.

Features

✅ Full TypeScript Support

✅ Unleash the full power of React18 Server components

✅ Works with all build systems/tools/frameworks for React18

✅ Doccumented with Typedoc (Docs)

✅ Next.js, Vite and Remix examples

Install

A canonical package with longer name is also published react18-global-store

$ pnpm add r18gs

or

$ npm install r18gs

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.

const [state, setState] = useRGS<number>("counter", 1);

You can access the same state across all client side components using unique key.

It is recommended to store your keys in separate file to avoid typos and unnecessary conflicts.

Example

// constants/global-states.ts
export const COUNTER = "counter";

// 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>
	);
}

// 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>
	);
}

Contributing

See contributing.md

🤩 Don't forger to star this repo!

Want hands-on course for getting started with Turborepo? Check out React and Next.js with TypeScript and The Game of Chess with Next.js, React and TypeScrypt

License

Licensed as MIT open source.

---

with 💖 by Mayank Kumar Chaudhari