{"id":20237450,"url":"https://github.com/react-widget/connect","last_synced_at":"2025-03-03T14:30:52.377Z","repository":{"id":57347695,"uuid":"397644560","full_name":"react-widget/connect","owner":"react-widget","description":"https://react-widget.github.io/connect/","archived":false,"fork":false,"pushed_at":"2022-03-22T02:35:58.000Z","size":508,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-04-24T01:01:49.765Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/react-widget.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-08-18T15:11:48.000Z","updated_at":"2022-03-22T02:37:11.000Z","dependencies_parsed_at":"2022-08-28T01:40:20.119Z","dependency_job_id":null,"html_url":"https://github.com/react-widget/connect","commit_stats":null,"previous_names":["react-widget/create-context-connect"],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-widget%2Fconnect","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-widget%2Fconnect/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-widget%2Fconnect/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-widget%2Fconnect/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/react-widget","download_url":"https://codeload.github.com/react-widget/connect/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241681893,"owners_count":20002400,"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":[],"created_at":"2024-11-14T08:27:00.531Z","updated_at":"2025-03-03T14:30:52.349Z","avatar_url":"https://github.com/react-widget.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-widget-connect\n将`React`的`Context`通过`connect`连接到组件，类似`React Redux`的`connect`\n\n## 安装\n\n`npm install --save react-widget-connect`\n\n## 使用\n\n```tsx\nimport { createConnect,createCombineConnect } from 'react-widget-connect'\n\ninterface IContext1 {\n  name: string\n  gender: number\n}\ninterface IContext2 {\n  age: number\n}\n\nconst connect = createConnect(IContext1)\nconst combineConnect = createCombineConnect({\n  ctx1:IContext1,\n  ctx2:IContext2,\n})\n\n// Component.ts\nfunction Component(props: {username: string, age: number}){\n  // TODO:\n}\n\n// 连接单个Context到组件\nexport default connect((value, ownProps) =\u003e {\n  // value.name\n  // value.gender\n  return {\n    username: value.name\n  }\n})(Component)\n\n// 或\n\n// 连接多个Context到组件\nexport default  combineConnect((values, ownProps) =\u003e {\n  // values.ctx1.name\n  // values.ctx1.gender\n  // values.ctx2.age\n  return {\n     username: values.ctx1.name\n  }\n})(Component)\n\n\n// App.tsx\nimport Component from './Component'\n\n\u003cComponent age={18} /\u003e\n\n```\n\n如不想用`connect(...)(Component)`的方式，也提供了hooks获取关联的`Context`数据，示例：\n\n```tsx\n// App.tsx\nfunction App(){\n  const info = connect.useSelector( value =\u003e ({\n    username: value.name\n  }))\n // 建议在使用 useSelector 时配合 React.useMemo\n return React.useMemo(() =\u003e \u003cdiv\u003e{info.username}\u003c/div\u003e, [info])\n}\n\n```\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-widget%2Fconnect","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Freact-widget%2Fconnect","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-widget%2Fconnect/lists"}