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: 2 months ago
JSON representation

Context + Use

Host: GitHub
URL: https://github.com/fodau/conuse
Owner: fodau
Created: 2019-09-27T02:48:35.000Z (almost 5 years ago)
Default Branch: master
Last Pushed: 2023-01-07T10:09:32.000Z (over 1 year ago)
Last Synced: 2024-03-05T02:23:57.249Z (4 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

Lists

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/).