Skip to content

Commit 209da08

Browse files
committed
Apply changesets and update CHANGELOG
1 parent 4ab636e commit 209da08

File tree

1 file changed

+41
-32
lines changed

1 file changed

+41
-32
lines changed

lib/README.md

Lines changed: 41 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,81 +1,90 @@
11
# React18GlobalStore <img src="https://raw.githubusercontent.com/mayank1513/mayank1513/main/popper.png" style="height: 40px"/>
22

3-
[![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/)
3+
[![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)
4+
[![Maintainability](https://api.codeclimate.com/v1/badges/ec3140063acd8df82481/maintainability)](https://codeclimate.com/github/react18-tools/react18-global-store/maintainability)
5+
[![Code Coverage](https://codecov.io/gh/react18-tools/react18-global-store/graph/badge.svg)](https://codecov.io/gh/react18-tools/react18-global-store)
6+
[![Version](https://img.shields.io/npm/v/r18gs.svg?colorB=green)](https://www.npmjs.com/package/r18gs)
7+
[![Downloads](https://img.jsdelivr.com/img.shields.io/npm/d18m/r18gs.svg)](https://www.npmjs.com/package/r18gs)
8+
![Bundle Size](https://img.shields.io/bundlephobia/minzip/r18gs)
9+
[![Gitpod Ready](https://img.shields.io/badge/Gitpod-ready--to--code-blue?logo=gitpod)](https://gitpod.io/from-referrer/)
410

5-
## Motivation
6-
7-
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.
11+
> 🌐 **Live Demo with Code**: [https://r18gs.vercel.app/](https://r18gs.vercel.app/)
812
9-
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.
13+
## Motivation
1014

11-
### Important Announcement
15+
While developing libraries utilizing React 18 features with Zustand, I encountered issues with tree-shaking when importing from specific folders. This caused the creation of multiple Zustand stores, resulting in bugs and unnecessary JavaScript code execution.
1216

13-
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.
17+
To address this, I created a lightweight, minimalistic store designed for shared states that optimizes tree-shaking and supports component imports from separate files.
1418

1519
## Features
1620

17-
✅ Full TypeScript Support
18-
19-
✅ Unleash the full power of React18 Server components
20-
21-
✅ Compatible with all build systems/tools/frameworks for React18
21+
**Full TypeScript Support**
22+
**Unlock the Full Power of React18 Server Components**
23+
**Compatible with All React18 Build Systems and Frameworks**
24+
**Comprehensive Documentation with [Typedoc](https://react18-tools.github.io/react18-global-store)**
25+
**Examples for Next.js, Vite, and Remix**
26+
**Seamlessly Works with Selectors**
2227

23-
✅ Documented with [Typedoc](https://react18-tools.github.io/react18-global-store) ([Docs](https://react18-tools.github.io/react18-global-store))
28+
## Simple Global State Across Components
2429

25-
✅ Examples for Next.js, Vite, and Remix
26-
27-
## Simple Global State Shared Across Multiple Components
28-
29-
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.
30+
Use the `useRGS` hook just like `useState`, but with a unique key to make the state accessible across components.
3031

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

35-
**_or_**
36+
Or initialize using a function:
3637

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

41-
> For detailed instructions, see [Getting Started](./md-docs/1.getting-started.md)
42+
> 🔗 **Getting Started**: [Guide](./md-docs/1.getting-started.md)
43+
44+
## What's New?
45+
46+
🚀 **Now Supports Selectors for Complex Stores**
47+
Explore more at [https://r18gs.vercel.app/](https://r18gs.vercel.app/).
4248

4349
## Using Plugins
4450

45-
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.
51+
Extend the store's functionality with the `create` function, `withPlugins` function, or the `useRGSWithPlugins` hook. Features like persistence to local storage can be easily integrated.
4652

4753
```tsx
4854
// store.ts
4955
import { create } from "r18gs/dist/with-plugins";
50-
import { persist } from "r18gs/dist/plugins"; /** You can create your own plugin or import third-party plugins */
56+
import { persist } from "r18gs/dist/plugins"; // Use third-party or custom plugins
5157

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

55-
Now, you can utilize `useMyPersistentCounterStore` similarly to `useState` without specifying an initial value.
61+
Use it just like `useState` without needing an initial value:
5662

5763
```tsx
5864
const [persistedCount, setPersistedCount] = useMyPersistentCounterStore();
5965
```
6066

61-
> For detailed instructions, see [Leveraging Plugins](./md-docs/2.leveraging-plugins.md)
67+
> 🔗 **Learn More**: [Leveraging Plugins](./md-docs/2.leveraging-plugins.md)
6268
6369
## Contributing
6470

65-
See [contributing.md](/contributing.md)
71+
Contributions are welcome! See [contributing.md](/contributing.md).
72+
73+
### 🌟 Don't Forget to Star [this repository](https://github.com/mayank1513/react18-global-store)!
6674

67-
### 🤩 Don't forget to star [this repo](https://github.com/mayank1513/react18-global-store)!
75+
### Hands-On Learning Resources
6876

69-
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)
77+
- [React and Next.js with TypeScript](https://mayank-chaudhari.vercel.app/courses/react-and-next-js-with-typescript)
78+
- [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)
7079

71-
![Repo Stats](https://repobeats.axiom.co/api/embed/ec3e74d795ed805a0fce67c0b64c3f08872e7945.svg "Repobeats analytics image")
80+
![Repo Stats](https://repobeats.axiom.co/api/embed/ec3e74d795ed805a0fce67c0b64c3f08872e7945.svg "Repobeats Analytics")
7281

7382
## License
7483

75-
This library is licensed under the MPL-2.0 open-source license.
84+
This library is licensed under the **MPL-2.0** open-source license.
7685

77-
> <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.
86+
> <img src="https://raw.githubusercontent.com/mayank1513/mayank1513/main/popper.png" style="height: 20px"/> Support our work by [sponsoring](https://github.com/sponsors/mayank1513) or enrolling in [our courses](https://mayank-chaudhari.vercel.app/courses).
7887
79-
<hr />
88+
---
8089

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

0 commit comments

Comments
 (0)