Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/Albert-Gao/auto-zustand-selectors-hook
Enjoy the performance gain of selectors without writing selectors in Zustand.
https://github.com/Albert-Gao/auto-zustand-selectors-hook
react-hooks typescript zustand
Last synced: 3 months ago
JSON representation
Enjoy the performance gain of selectors without writing selectors in Zustand.
- Host: GitHub
- URL: https://github.com/Albert-Gao/auto-zustand-selectors-hook
- Owner: Albert-Gao
- License: mit
- Created: 2021-06-08T03:33:12.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2024-05-19T23:21:37.000Z (9 months ago)
- Last Synced: 2024-05-22T16:17:25.379Z (8 months ago)
- Topics: react-hooks, typescript, zustand
- Language: TypeScript
- Homepage:
- Size: 341 KB
- Stars: 83
- Watchers: 3
- Forks: 3
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# auto-zustand-selectors-hook
**Enjoy the performance gain of selectors without writing selectors!**
## Features
- auto generate selectors for Zustand store (be it a value or a function)
- Two styles available
- Fully Typescript support (auto-completion for the generated selectors!)
## Install
```bash
npm install --save auto-zustand-selectors-hook
```
Or with yarn:
```bash
yarn add auto-zustand-selectors-hook
```
## Notice
The `v2` supports `Zustand v4`, if you are using a `Zustand v3`, please install the `v1` version
```bash
yarn add [email protected]
npm install --save [email protected]
```
## Usage
Let's say you have a store like this
```typescript
interface BearState {
bears: number;
increase: (by: number) => void;
}
const useStoreBase = create((set) => ({
bears: 0,
increase: (by) => set((state) => ({ bears: state.bears + by })),
}));
```
> **There are two types of selectors you can generate, purely function signature difference, underneath, they are all selectors.**
## 1. For function style ( createSelectorFunctions )
```typescript
import { createSelectorFunctions } from 'auto-zustand-selectors-hook';
import { create } from 'zustand';
// wrap your store
const useStore = createSelectorFunctions(useStoreBase);
// use it like this!
// useStore.use.blah is a pre-generated selector, yeah!
const TestComponent = () => {
const bears = useStore.use.bears();
const increase = useStore.use.increase();
return (
<>
{bears}
{
increase(1);
}}
>
+
>
);
};
```
## 2. For hook style ( createSelectorHooks )
```typescript
import { createSelectorHooks } from 'auto-zustand-selectors-hook';
import { create } from 'zustand';
// wrap your store
const useStore = createSelectorHooks(useStoreBase);
// use it like this!
// useStore.useBlah is a pre-generated selector, yeah!
const TestComponent = () => {
const bears = useStore.useBears();
const increase = useStore.useIncrease();
return (
<>
{bears}
{
increase(1);
}}
>
+
>
);
};
```
## 3. use with middlewares
> You use the middleware for creating the base store, and `ALWAYS` use `auto-zustand-selectors-hooks` as a separate wrapper
```typescript
import {
createSelectorHooks,
ZustandFuncSelectors,
ZustandHookSelectors,
} from 'auto-zustand-selectors-hook';
import create from 'zustand';
import { persist } from 'zustand/middleware';
const useStoreBase = create()(
persist((set) => ({
bears: 0,
increase: (by) => set((state) => ({ bears: state.bears + by })),
}))
);
// ❌ this will lost the persist middleware type like useStore.persist
export const useStore = createSelectorHooks(useStoreBase);
// ✅ DO this if use createSelectorFunctions()
export const useStore = createSelectorFunctions(
useStoreBase
) as typeof useStoreBase & ZustandFuncSelectors;
// ✅ DO this if use createSelectorHooks()
export const useStore = createSelectorHooks(
useStoreBase
) as typeof useStoreBase & ZustandHookSelectors;
```
## License
MIT © [Albert Gao](https://github.com/Albert-Gao)
## Credits
It all starts from my [feature request](https://github.com/pmndrs/zustand/issues/400)
Thanks [dai-shi](https://github.com/dai-shi) for the initial implementation and ideas of API.