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

✅ Works for both client side and server side components (be careful, separate states are created for server side and client side. Any changes done on client side will not affect the server components.)

✅ 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.

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

Contribute

Build

To build all apps and packages, run the following command:

cd react18-global-store
pnpm build

Develop

To develop all apps and packages, run the following command:

cd react18-global-store
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 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