Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/fodau/conuse
Context + Use
https://github.com/fodau/conuse
context conuse hook react react-state reactjs state-management
Last synced: 3 months ago
JSON representation
Context + Use
- Host: GitHub
- URL: https://github.com/fodau/conuse
- Owner: fodau
- Created: 2019-09-27T02:48:35.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T10:09:32.000Z (about 2 years ago)
- Last Synced: 2024-08-10T06:11:23.188Z (5 months ago)
- Topics: context, conuse, hook, react, react-state, reactjs, state-management
- Language: TypeScript
- Homepage: https://codesandbox.io/s/github/progressive-query-list/conuse/tree/master/examples/
- Size: 673 KB
- Stars: 9
- Watchers: 2
- Forks: 0
- Open Issues: 22
-
Metadata Files:
- Readme: README-zh.md
Awesome Lists containing this project
- fucking-awesome-react-hooks - `conuse`
- awesome-react-hooks-cn - `conuse`
- awesome-react-hooks - `conuse`
- awesome-react-hooks - `conuse`
README
# conuse
> Share `Hook` with `Context`
[English](./README.md) | 简体中文
## 开始
```js
import React, { useState } from 'react';
import createConuse from 'conuse';
// 1️⃣ 创建一个自定义 Hook
const useCounter = () => {
const [count, setCount] = useState(0);
const increment = () => setCount(prevCount => prevCount + 1);
return { count, increment };
};
// 2️⃣ 把自定义 Hook 传入 createConuse 作为参数
const { ConuseProvider, useConuseContext } = createConuse({ counter: useCounter });
function Button() {
// 3️⃣ 使用 use Context 获取自定义 Hook 提供的方法和状态
const { increment } = useConuseContext('counter');
return +;
}
function Count() {
// 4️⃣ 同样，通过 use Context 获取自定义 Hook 提供的方法和状态
const { count } = useConuseContext('counter');
return {count};
}
function App() {
// 5️⃣ 用 Provider 包在你的组件外面
return (
);
}
```
## 安装
npm:
```sh
npm i conuse
```
Yarn:
```sh
yarn add conuse
```
## API
### `const { ConuseProvider, useConuseContext, getContext } = createConuse(useMap[, conuse])`
Conuse 会暴露 `createConuse` 函数，可以通过该函数创建出 `conuse` 类型，类型属性如下：
```
Conuse {
ConuseProvider: React.FC;
useConuseContext: (name?: string) => any;
getContext: (name?: string) => any;
}
```
#### useMap
类型: `{ [name: string]: Hook }`
这是一个自定义 Hook 对象，可以组件多个 Hook。如果你想获取某个 Hook，你可以把 name 传入到 `useConuseContext`，例子如下：
```js
const { useConuseContext } = createConuse({ counter: useCounter });
const Component = () => {
// 拿到 useCounter 值
const { count } = useConuseContext('counter');
return count;
};
```
#### conuse
类型: `Conuse`
可以组件多个 Conuse
```js
const toggleConuse = createConuse({ toggle: useToggle });
const { useConuseContext } = createConuse({ counter: useCounter }, { toggle: toggleConuse });
const Component = () => {
const { count } = useConuseContext('counter');
const { toggle } = useConuseContext('toggle');
return `${count}${toggle}`;
};
```
#### ConuseProvider
类型: `React.FC`
使用方式跟 [Context.Provider](https://reactjs.org/docs/context.html#contextprovider) 一致, 可以把 `ConuseProvider` 放在你 App 组件的最外边。
```js
```
#### useConuseContext
类型: `(name?: string) => any`
获取特定 Hook 的值
```js
const [value, setValue] = useConuseContext()
```
参数 `name` 必须是 `useMap` 里面某个 key，这样子你就可以获取到特定 Hook 值。如果你想要获取所有的 Hook 的话，你可以不传 name。
```js
const { useCounter } = useConuseContext();
const { count } = useCounter();
```
#### getContext
类型: `(name?: string) => any`
你可以通过 getContext 方式，在非 `Function Component` 里面就可以获取到 Hook 值
```js
const handleClick = () => {
const { count } = getContext('counter');
};
const App = () => {
return 点击;
};
```
## 灵感
必须要感谢 [constate](https://github.com/diegohaz/constate) 和 [unstated-next](https://github.com/jamiebuilds/unstated-next) 精彩的想法,还有 @kentcdodds 的[Application State Management with React](https://kentcdodds.com/blog/application-state-management-with-react/).