{"id":13450292,"url":"https://github.com/fodau/conuse","last_synced_at":"2025-03-23T16:31:10.998Z","repository":{"id":35135014,"uuid":"211222872","full_name":"fodau/conuse","owner":"fodau","description":"Context + Use","archived":false,"fork":false,"pushed_at":"2023-01-07T10:09:32.000Z","size":689,"stargazers_count":9,"open_issues_count":22,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-12-14T15:37:26.991Z","etag":null,"topics":["context","conuse","hook","react","react-state","reactjs","state-management"],"latest_commit_sha":null,"homepage":"https://codesandbox.io/s/github/progressive-query-list/conuse/tree/master/examples/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/fodau.png","metadata":{"files":{"readme":"README-zh.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-09-27T02:48:35.000Z","updated_at":"2021-08-18T14:01:21.000Z","dependencies_parsed_at":"2023-01-15T14:45:24.467Z","dependency_job_id":null,"html_url":"https://github.com/fodau/conuse","commit_stats":null,"previous_names":["progressive-query-list/conuse"],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fodau%2Fconuse","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fodau%2Fconuse/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fodau%2Fconuse/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fodau%2Fconuse/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fodau","download_url":"https://codeload.github.com/fodau/conuse/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245130730,"owners_count":20565701,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["context","conuse","hook","react","react-state","reactjs","state-management"],"created_at":"2024-07-31T07:00:33.356Z","updated_at":"2025-03-23T16:31:10.695Z","avatar_url":"https://github.com/fodau.png","language":"TypeScript","funding_links":[],"categories":["Packages"],"sub_categories":[],"readme":"# conuse\n\n\u003e Share `Hook` with `Context`\n\n[English](./README.md) | 简体中文\n\n## 开始\n\n```js\nimport React, { useState } from 'react';\nimport createConuse from 'conuse';\n\n// 1️⃣ 创建一个自定义 Hook\nconst useCounter = () =\u003e {\n  const [count, setCount] = useState(0);\n  const increment = () =\u003e setCount(prevCount =\u003e prevCount + 1);\n  return { count, increment };\n};\n\n// 2️⃣ 把自定义 Hook 传入 createConuse 作为参数\nconst { ConuseProvider, useConuseContext } = createConuse({ counter: useCounter });\n\nfunction Button() {\n  // 3️⃣ 使用 use Context 获取自定义 Hook 提供的方法和状态\n  const { increment } = useConuseContext('counter');\n  return \u003cbutton onClick={increment}\u003e+\u003c/button\u003e;\n}\n\nfunction Count() {\n  // 4️⃣ 同样，通过 use Context 获取自定义 Hook 提供的方法和状态\n  const { count } = useConuseContext('counter');\n  return \u003cspan\u003e{count}\u003c/span\u003e;\n}\n\nfunction App() {\n  // 5️⃣ 用 Provider 包在你的组件外面\n  return (\n    \u003cConuseProvider\u003e\n      \u003cCount /\u003e\n      \u003cButton /\u003e\n    \u003c/ConuseProvider\u003e\n  );\n}\n```\n\n## 安装\n\nnpm:\n\n```sh\nnpm i conuse\n```\n\nYarn:\n\n```sh\nyarn add conuse\n```\n\n## API\n\n### `const { ConuseProvider, useConuseContext, getContext } = createConuse(useMap[, conuse])`\n\nConuse 会暴露 `createConuse` 函数，可以通过该函数创建出 `conuse` 类型，类型属性如下：\n\n```\nConuse {\n  ConuseProvider: React.FC\u003cany\u003e;\n  useConuseContext: (name?: string) =\u003e any;\n  getContext: (name?: string) =\u003e any;\n}\n```\n\n#### useMap\n\n类型: `{ [name: string]: Hook }`\n\n这是一个自定义 Hook 对象，可以组件多个 Hook。如果你想获取某个 Hook，你可以把 name 传入到 `useConuseContext`，例子如下：\n\n```js\nconst { useConuseContext } = createConuse({ counter: useCounter });\nconst Component = () =\u003e {\n  // 拿到 useCounter 值\n  const { count } = useConuseContext('counter');\n  return count;\n};\n```\n\n#### conuse\n\n类型: `Conuse`\n\n可以组件多个 Conuse\n\n```js\nconst toggleConuse = createConuse({ toggle: useToggle });\nconst { useConuseContext } = createConuse({ counter: useCounter }, { toggle: toggleConuse });\nconst Component = () =\u003e {\n  const { count } = useConuseContext('counter');\n  const { toggle } = useConuseContext('toggle');\n  return `${count}${toggle}`;\n};\n```\n\n#### ConuseProvider\n\n类型: `React.FC\u003cany\u003e`\n\n使用方式跟 [Context.Provider](https://reactjs.org/docs/context.html#contextprovider) 一致, 可以把 `ConuseProvider` 放在你 App 组件的最外边。\n\n```js\n\u003cConuseProvider\u003e\n  \u003cApp /\u003e\n\u003c/ConuseProvider\u003e\n```\n\n#### useConuseContext\n\n类型: `(name?: string) =\u003e any`\n\n获取特定 Hook 的值\n\n```js\nconst [value, setValue] = useConuseContext(\u003cname\u003e)\n```\n\n参数 `name` 必须是 `useMap` 里面某个 key，这样子你就可以获取到特定 Hook 值。如果你想要获取所有的 Hook 的话，你可以不传 name。\n\n```js\nconst { useCounter } = useConuseContext();\nconst { count } = useCounter();\n```\n\n#### getContext\n\n类型: `(name?: string) =\u003e any`\n\n你可以通过 getContext 方式，在非 `Function Component` 里面就可以获取到 Hook 值\n\n```js\nconst handleClick = () =\u003e {\n  const { count } = getContext('counter');\n};\n\nconst App = () =\u003e {\n  return \u003cButton onClick={handleClick}\u003e点击\u003c/Button\u003e;\n};\n```\n\n## 灵感\n\n必须要感谢 [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/).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffodau%2Fconuse","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffodau%2Fconuse","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffodau%2Fconuse/lists"}