# react19-store

> A simple yet elegant, light weight, react18 global store to replace Zustand for better tree shaking.

Latest version **2.0.2** (published 2024-12-19) · MPL-2.0 license · 0 weekly downloads

## Install

```sh
npm install react19-store
pnpm add react19-store
yarn add react19-store
bun add react19-store
```

## Health

**Score 55/100 (C)** — status: stable.

Positive: has types; esm support; no vulnerabilities; has provenance; high quality score.

Warnings: low downloads.

Negative: stale.

## Facts

| | |
|---|---|
| Version | 2.0.2 |
| Published | 2024-12-19 |
| First published | 2024-04-20 |
| Weekly downloads | 0 |
| License | MPL-2.0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 20.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 8 |
| Author | Mayank Kumar Chaudhari |
| Maintainers | mayank1513 |
| Keywords | React, React 18, React 19, Ultra Lite, React Global Store, Next.js, Next.js 14, Next.js 15, React Server Components, Highly Customizable, State-of-the-Art, Broad Compatibility, Frontend Development, UI Components, Web Development, Progressive, Modern Design, Seamless Integration, react18-global-store, Next.js Framework, Next.js 13, React 18 Features, Zustand Alternative for simple need, Zen Store, React Server-Side Components, React Client-Side Components, TypeScript Support, Mayank1513, Turborepo Template |

## Links

- npm: https://www.npmjs.com/package/react19-store
- Repository: https://github.com/react18-tools/react18-global-store
- Homepage: https://react18-global-store.vercel.app/
- Issues: https://github.com/react18-tools/react18-global-store/issues
- Funding: https://github.com/sponsors/react18-tools
- npm.io page: https://npm.io/package/react19-store

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 2.0.2 (latest) — 2024-12-19
- 3.0.1 — 2024-12-18
- 3.0.0 — 2024-12-18
- 2.1.0 — 2024-12-17
- 2.0.1 — 2024-12-13
- 2.0.1-use.0 — 2024-07-12
- 2.0.0 — 2024-07-11
- 2.0.0-alpha.0 — 2024-06-23
- 1.1.3 — 2024-06-22
- 1.1.3-refactor.0 — 2024-06-22
- 1.1.2 — 2024-06-17
- 1.1.1 — 2024-06-14
- 1.1.0 — 2024-06-13
- 1.0.2 — 2024-05-02
- 1.0.1 — 2024-05-01
- … 6 more at https://npm.io/package/react19-store/versions

## README

# React18GlobalStore <img src="https://raw.githubusercontent.com/mayank1513/mayank1513/main/popper.png" style="height: 40px"/>

[![test](https://github.com/react18-tools/react18-global-store/actions/workflows/test.yml/badge.svg)](https://github.com/react18-tools/react18-global-store/actions/workflows/test.yml) [![Maintainability](https://api.codeclimate.com/v1/badges/ec3140063acd8df82481/maintainability)](https://codeclimate.com/github/react18-tools/react18-global-store/maintainability) [![codecov](https://codecov.io/gh/react18-tools/react18-global-store/graph/badge.svg)](https://codecov.io/gh/react18-tools/react18-global-store) [![Version](https://img.shields.io/npm/v/r18gs.svg?colorB=green)](https://www.npmjs.com/package/r18gs) [![Downloads](https://img.jsdelivr.com/img.shields.io/npm/d18m/r18gs.svg)](https://www.npmjs.com/package/r18gs) ![npm bundle size](https://img.shields.io/bundlephobia/minzip/r18gs) [![Gitpod ready-to-code](https://img.shields.io/badge/Gitpod-ready--to--code-blue?logo=gitpod)](https://gitpod.io/from-referrer/)

## Motivation

I've developed fantastic libraries leveraging React18 features using Zustand, and they performed admirably. However, when attempting to import from specific folders for better tree-shaking, the libraries encountered issues. Each import resulted in a separate Zustand store being created, leading to increased package size.

As a solution, I set out to create a lightweight, bare minimum store that facilitates shared state even when importing components from separate files, optimizing tree-shaking.

### Important Announcement

The default export from `r18gs` is [deprecated](https://github.com/react18-tools/react18-global-store/discussions/31). Please switch to using `import { useRGS } from "r18gs"` instead. The default export will be removed in the next major release.

## Features

✅ Full TypeScript Support

✅ Unleash the full power of React18 Server components

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

✅ Documented with [Typedoc](https://react18-tools.github.io/react18-global-store) ([Docs](https://react18-tools.github.io/react18-global-store))

✅ Examples for Next.js, Vite, and Remix

## Simple Global State Shared Across Multiple Components

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

**_or_**

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

> For detailed instructions, see [Getting Started](./md-docs/1.getting-started.md)

## Using Plugins

Enhance the functionality of the store by leveraging either the `create` function, `withPlugins` function, or the `useRGSWithPlugins` hook from `r18gs/dist/with-plugins`, enabling features such as storing to local storage, among others.

```tsx
// store.ts
import { create } from "r18gs/dist/with-plugins";
import { persist } from "r18gs/dist/plugins"; /** You can create your own plugin or import third-party plugins */

export const useMyPersistentCounterStore = create<number>("persistent-counter", 0, [persist()]);
```

Now, you can utilize `useMyPersistentCounterStore` similarly to `useState` without specifying an initial value.

```tsx
const [persistedCount, setPersistedCount] = useMyPersistentCounterStore();
```

> For detailed instructions, see [Leveraging Plugins](./md-docs/2.leveraging-plugins.md)

## Contributing

See [contributing.md](/contributing.md)

### 🤩 Don't forget to star [this repo](https://github.com/mayank1513/react18-global-store)!

Interested in hands-on courses 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 TypeScript](https://www.udemy.com/course/game-of-chess-with-nextjs-react-and-typescript/?referralCode=851A28F10B254A8523FE)

![Repo Stats](https://repobeats.axiom.co/api/embed/ec3e74d795ed805a0fce67c0b64c3f08872e7945.svg "Repobeats analytics image")

## License

This library is licensed under the MPL-2.0 open-source license.

> <img src="https://raw.githubusercontent.com/mayank1513/mayank1513/main/popper.png" style="height: 20px"/> Please consider enrolling in [our courses](https://mayank-chaudhari.vercel.app/courses) or [sponsoring](https://github.com/sponsors/mayank1513) our work.

<hr />

<p align="center" style="text-align:center">with 💖 by <a href="https://mayank-chaudhari.vercel.app" target="_blank">Mayank Kumar Chaudhari</a></p>

---
_Source: https://npm.io/package/react19-store · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._