{"id":18931040,"url":"https://github.com/nanxiaobei/react-easy-contexts","last_synced_at":"2025-04-15T16:32:18.718Z","repository":{"id":37520136,"uuid":"373805654","full_name":"nanxiaobei/react-easy-contexts","owner":"nanxiaobei","description":"♒️ A simple tool to add multiple React contexts easily","archived":false,"fork":false,"pushed_at":"2021-09-16T20:00:21.000Z","size":84,"stargazers_count":17,"open_issues_count":0,"forks_count":2,"subscribers_count":3,"default_branch":"main","last_synced_at":"2024-10-12T19:49:08.729Z","etag":null,"topics":["contexts","hooks","react"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/nanxiaobei.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-06-04T10:28:26.000Z","updated_at":"2024-03-24T16:16:08.000Z","dependencies_parsed_at":"2022-08-18T04:41:15.794Z","dependency_job_id":null,"html_url":"https://github.com/nanxiaobei/react-easy-contexts","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nanxiaobei%2Freact-easy-contexts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nanxiaobei%2Freact-easy-contexts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nanxiaobei%2Freact-easy-contexts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nanxiaobei%2Freact-easy-contexts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nanxiaobei","download_url":"https://codeload.github.com/nanxiaobei/react-easy-contexts/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223679348,"owners_count":17184851,"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":["contexts","hooks","react"],"created_at":"2024-11-08T11:40:15.647Z","updated_at":"2024-11-08T11:40:16.160Z","avatar_url":"https://github.com/nanxiaobei.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-easy-contexts ♒️\n\nA simple tool to add multiple React contexts easily.\n\n[![npm](https://img.shields.io/npm/v/react-easy-contexts.svg?style=flat-square)](https://www.npmjs.com/package/react-easy-contexts)\n[![npm](https://img.shields.io/npm/dt/react-easy-contexts?style=flat-square)](https://www.npmtrends.com/react-easy-contexts)\n[![npm bundle size](https://img.shields.io/bundlephobia/minzip/react-easy-contexts?style=flat-square)](https://bundlephobia.com/result?p=react-easy-contexts)\n[![npm peer dependency version](https://img.shields.io/npm/dependency-version/react-easy-contexts/peer/react?style=flat-square)](https://github.com/facebook/react)\n[![GitHub](https://img.shields.io/github/license/nanxiaobei/react-easy-contexts?style=flat-square)](https://github.com/nanxiaobei/react-easy-contexts/blob/master/LICENSE)\n\n---\n\n## Add\n\n```shell script\nyarn add react-easy-contexts\n\n# or\n\nnpm i react-easy-contexts\n```\n\n## Use\n\n```jsx\n// App.jsx\nimport { useState, useMemo } from 'react';\nimport create from 'react-easy-contexts';\n\nexport const ctx = create({\n  useX() {\n    const [x, setX] = useState(0);\n    return useMemo(() =\u003e ({ x, setX }), [x]);\n  },\n  useY() {\n    const [y, setY] = useState(0);\n    return useMemo(() =\u003e ({ y, setY }), [y]);\n  },\n  useZ() {\n    const [z, setZ] = useState(0);\n    return useMemo(() =\u003e ({ z, setZ }), [z]);\n  },\n});\n\nconst App = () =\u003e {\n  const Provider = ctx.useProvider();\n  return (\n    \u003cProvider\u003e\n      \u003cMain /\u003e\n    \u003c/Provider\u003e\n  );\n};\n\n// Main.jsx\nimport { ctx } from './App';\n\nconst Main = () =\u003e {\n  const { x } = ctx.useX();\n  const { y } = ctx.useY();\n  const { z } = ctx.useZ();\n\n  return (\n    \u003cdiv\u003e\n      {x} {y} {z}\n    \u003c/div\u003e\n  );\n};\n```\n\n**Without `react-easy-contexts`, equals to:**\n\n```jsx\n// App.jsx\nimport { useState, useContext, useMemo, createContext } from 'react';\n\nconst XContext = createContext({});\nconst YContext = createContext({});\nconst ZContext = createContext({});\n\nexport const useX = () =\u003e useContext(XContext);\nexport const useY = () =\u003e useContext(YContext);\nexport const useZ = () =\u003e useContext(ZContext);\n\nconst XProvider = ({ children }) =\u003e {\n  const [x, setX] = useState(0);\n  const value = useMemo(() =\u003e ({ x, setX }), [x]);\n  return \u003cXContext.Provider value={value}\u003e{children}\u003c/XContext.Provider\u003e;\n};\nconst YProvider = ({ children }) =\u003e {\n  const [y, setY] = useState(0);\n  const value = useMemo(() =\u003e ({ y, setY }), [y]);\n  return \u003cYContext.Provider value={value}\u003e{children}\u003c/YContext.Provider\u003e;\n};\nconst ZProvider = ({ children }) =\u003e {\n  const [z, setZ] = useState(0);\n  const value = useMemo(() =\u003e ({ z, setZ }), [z]);\n  return \u003cZContext.Provider value={value}\u003e{children}\u003c/ZContext.Provider\u003e;\n};\n\nconst App = () =\u003e {\n  return (\n    \u003cXProvider\u003e\n      \u003cYProvider\u003e\n        \u003cZProvider\u003e\n          \u003cMain /\u003e\n        \u003c/ZProvider\u003e\n      \u003c/YProvider\u003e\n    \u003c/XProvider\u003e\n  );\n};\n\n// Main.jsx\nimport { useX, useY, useZ } from './App';\n\nconst Main = () =\u003e {\n  const { x } = useX();\n  const { y } = useY();\n  const { z } = useZ();\n\n  return (\n    \u003cdiv\u003e\n      {x} {y} {z}\n    \u003c/div\u003e\n  );\n};\n```\n\n## Try\n\n[![Edit react-easy-contexts](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/react-easy-contexts-28f8z?fontsize=14\u0026hidenavigation=1\u0026theme=dark)\n\n## API\n\n### create\n\n```js\nimport create from 'react-easy-contexts';\n\nconst ctx = create({ useA() {}, useB() {}, useC() {} });\n// don't use \"useProvider\" as key, it'll be overwritten.\n```\n\n## License\n\n[MIT License](https://github.com/nanxiaobei/react-easy-contexts/blob/master/LICENSE) © [nanxiaobei](https://lee.so/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnanxiaobei%2Freact-easy-contexts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnanxiaobei%2Freact-easy-contexts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnanxiaobei%2Freact-easy-contexts/lists"}