Skip to content

Commit

Permalink
Apply changesets and update CHANGELOG
Browse files Browse the repository at this point in the history
  • Loading branch information
@mayank1513
mayank1513 committed Jun 17, 2024
1 parent fd4dc02 commit f6ecb5e
Showing 1 changed file with 33 additions and 86 deletions.
119 changes: 33 additions & 86 deletions lib/README.md
View file
Original file line number Diff line number Diff line change
@@ -1,123 +1,70 @@
# R18gs <img src="https://github.com/react18-tools/react18-global-store/blob/main/popper.png?raw=true" style="height: 40px"/>
# React18GlobalStore <img src="https://github.com/react18-tools/turborepo-template/blob/main/popper.png?raw=true" 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/aa896ec14c570f3bb274/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/)
[![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/)

R18gs is a comprehensive library designed to unlock the full potential of React 18 server components. It provides customizable loading animation components and a fullscreen loader container, seamlessly integrating with React and Next.js.
## Motivation

✅ Fully Treeshakable (import from `r18gs/client/loader-container`)
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.

✅ Fully TypeScript Supported
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.

✅ Leverages the power of React 18 Server components
## Features

✅ Compatible with all React 18 build systems/tools/frameworks
✅ Full TypeScript Support

✅ 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
✅ Unleash the full power of React18 Server components

> <img src="https://github.com/react18-tools/react18-global-store/blob/main/popper.png?raw=true" style="height: 20px"/> Please consider starring [this repository](https://github.com/react18-tools/react18-global-store) and sharing it with your friends.
✅ Compatible with all build systems/tools/frameworks for React18

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

### Installation
✅ Examples for Next.js, Vite, and Remix

```bash
$ pnpm add r18gs
```
## Simple Global State Shared Across Multiple Components

**_or_**
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.

```bash
$ npm install r18gs
```tsx
const [state, setState] = useRGS<number>("counter", 1);
```

**_or_**

```bash
$ yarn add r18gs
```

## Want Lite Version? [![npm bundle size](https://img.shields.io/bundlephobia/minzip/r18gs-lite)](https://www.npmjs.com/package/r18gs-lite) [![Version](https://img.shields.io/npm/v/r18gs-lite.svg?colorB=green)](https://www.npmjs.com/package/r18gs-lite) [![Downloads](https://img.jsdelivr.com/img.shields.io/npm/d18m/r18gs-lite.svg)](https://www.npmjs.com/package/r18gs-lite)

```bash
$ pnpm add r18gs-lite
```

**or**

```bash
$ npm install r18gs-lite
```

**or**

```bash
$ yarn add r18gs-lite
```tsx
const [state, setState] = useRGS<number>("counter", () => 1);
```

> You need `r18gs` as a peer-dependency
> For detailed instructions, see [Getting Started](./md-docs/1.getting-started.md)
### Import Styles
## Using Plugins

You can import styles globally or within specific components.

```css
/* globals.css */
@import "r18gs/dist";
```
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
// layout.tsx
import "r18gs/dist/index.css";
```

For selective imports:
// 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 */

```css
/* globals.css */
@import "r18gs/dist/client"; /** required if you are using LoaderContainer */
@import "r18gs/dist/server/bars/bars1";
export const useMyPersistentCounterStore = create<number>("persistent-counter", 0, [persist()]);
```

### Usage

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

```tsx
import { Bars1 } from "r18gs/dist/server/bars/bars1";

export default function MyComponent() {
return someCondition ? <Bars1 /> : <>Something else...</>;
}
const [persistedCount, setPersistedCount] = useMyPersistentCounterStore();
```

For detailed API and options, refer to [the API documentation](https://react18-tools.github.io/react18-global-store).
> For detailed instructions, see [Leveraging Plugins](./md-docs/2.leveraging-plugins.md)
**Using LoaderContainer**
## Contributing

`LoaderContainer` is a fullscreen component. You can add this component directly in your layout and then use `useLoader` hook to toggle its visibility.
See [contributing.md](/contributing.md)

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

```tsx
// some other page or component
import { useLoader } from "r18gs/dist/hooks";

export default MyComponent() {
const { setLoading } = useLoader();
useCallback(()=>{
setLoading(true);
...do some work
setLoading(false);
}, [])
...
}
```
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

Expand Down

0 comments on commit f6ecb5e

Please sign in to comment.