{"id":13566809,"url":"https://github.com/betula/use-between","last_synced_at":"2025-04-04T10:06:49.034Z","repository":{"id":46136878,"uuid":"266319708","full_name":"betula/use-between","owner":"betula","description":"Sharing state between React components","archived":false,"fork":false,"pushed_at":"2022-12-26T06:26:55.000Z","size":584,"stargazers_count":287,"open_issues_count":12,"forks_count":11,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-03-28T09:07:27.360Z","etag":null,"topics":["react","react-hooks","reactive","shared-state"],"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/betula.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":null,"patreon":null,"open_collective":"use-between","ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2020-05-23T11:11:10.000Z","updated_at":"2025-01-23T18:10:54.000Z","dependencies_parsed_at":"2023-01-30T23:30:58.207Z","dependency_job_id":null,"html_url":"https://github.com/betula/use-between","commit_stats":null,"previous_names":[],"tags_count":29,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/betula%2Fuse-between","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/betula%2Fuse-between/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/betula%2Fuse-between/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/betula%2Fuse-between/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/betula","download_url":"https://codeload.github.com/betula/use-between/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247157281,"owners_count":20893220,"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":["react","react-hooks","reactive","shared-state"],"created_at":"2024-08-01T13:02:17.242Z","updated_at":"2025-04-04T10:06:49.012Z","avatar_url":"https://github.com/betula.png","language":"TypeScript","funding_links":["https://opencollective.com/use-between"],"categories":["TypeScript","List"],"sub_categories":[],"readme":"# use-between\n\n[![npm version](https://img.shields.io/npm/v/use-between?style=flat-square)](https://www.npmjs.com/package/use-between) [![build status](https://img.shields.io/github/actions/workflow/status/betula/use-between/tests.yml?branch=master\u0026style=flat-square)](https://github.com/betula/use-between/actions?workflow=Tests) [![npm bundle size](https://img.shields.io/bundlephobia/minzip/use-between?style=flat-square)](https://bundlephobia.com/result?p=use-between) [![code coverage](https://img.shields.io/coveralls/github/betula/use-between?style=flat-square)](https://coveralls.io/github/betula/use-between) [![typescript supported](https://img.shields.io/npm/types/typescript?style=flat-square)](https://github.com/betula/use-between) [![100k+ downloaded](https://img.shields.io/npm/dt/use-between?style=flat-square)](https://www.npmjs.com/package/use-between)\n\nWhen you want to separate your React hooks between several components it's can be very difficult, because all context data stored in React component function area.\nIf you want to share some of state parts or control functions to another component your need pass It thought React component props. But If you want to share It with sibling one level components or a set of scattered components, you will be frustrated.\n\n`useBetween` hook is the solution to your problem :kissing_closed_eyes:\n\n```javascript\nimport React, { useState, useCallback } from 'react';\nimport { useBetween } from 'use-between';\n\nconst useCounter = () =\u003e {\n  const [count, setCount] = useState(0);\n  const inc = useCallback(() =\u003e setCount(c =\u003e c + 1), []);\n  const dec = useCallback(() =\u003e setCount(c =\u003e c - 1), []);\n  return {\n    count,\n    inc,\n    dec\n  };\n};\n\nconst useSharedCounter = () =\u003e useBetween(useCounter);\n\nconst Count = () =\u003e {\n  const { count } = useSharedCounter();\n  return \u003cp\u003e{count}\u003c/p\u003e;\n};\n\nconst Buttons = () =\u003e {\n  const { inc, dec } = useSharedCounter();\n  return (\n    \u003c\u003e\n      \u003cbutton onClick={inc}\u003e+\u003c/button\u003e\n      \u003cbutton onClick={dec}\u003e-\u003c/button\u003e\n    \u003c/\u003e\n  );\n};\n\nconst App = () =\u003e (\n  \u003c\u003e\n    \u003cCount /\u003e\n    \u003cButtons /\u003e\n    \u003cCount /\u003e\n    \u003cButtons /\u003e\n  \u003c/\u003e\n);\n\nexport default App;\n```\n[![Edit Counter with useBetween](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/counter-with-usebetween-zh4tp?file=/src/App.js)\n\n`useBetween` is a way to call any hook. But so that the state will not be stored in the React component. For the same hook, the result of the call will be the same. So we can call one hook in different components and work together on one state. When updating the shared state, each component using it will be updated too.\n\nIf you like this idea and would like to use it, please put star in github. It will be your first contribution!\n\n### Developers :sparkling_heart: use-between\n\n\u003e Hey [@betula](https://github.com/betula), just wanted to say thank you for this awesome library! ✋\n\u003e Switching from React Context + useReducer to this library reduced soooo much boilerplate code.\n\u003e It's much more nice, clean and simple now, plus the bonus of using \"useEffect\" incapsulated within the state hook is just awesome.\n\u003e\n\u003e I don't get why this library doesn't have more stars and more popularity. People using useContext+useReducer are really missing out 😃\n\u003e\n\u003e [**Jesper**, _This library should have way more stars! 🥇_](https://github.com/betula/use-between/issues/14)\n\n\n\u003e [@betula](https://github.com/betula) as I mentioned before this lib is awesome and it allowed me to simplify an app that was using Redux. I was able to replace everything we were doing with Redux with just use-between and its tiny 2K footprint!\n\u003e\n\u003e Plus personally I think the code is cleaner because with use-between it just looks like normal hooks and not anything special like Redux code. I personally find it easier to read and understand than Redux!\n\u003e \n\u003e [**Melloware**, _Release discussion_](https://github.com/betula/use-between/discussions/20#discussioncomment-1715792)\n\n\u003e I was about to install Redux until I found this library and it is a live saver. Really awesome job [@betula](https://github.com/betula). I don't know if I ever need to use Redux again haha\n\u003e \n\u003e [**Ronald Castillo**](https://github.com/betula/use-between/issues/14#issuecomment-1050601343)\n\n### Supported hooks\n\n```diff\n+ useState\n+ useEffect\n+ useReducer\n+ useCallback\n+ useMemo\n+ useRef\n+ useImperativeHandle\n```\n\nIf you found some bug or want to propose improvement please [make an Issue](https://github.com/betula/use-between/issues/new) or join to [release discussion on Github](https://github.com/betula/use-between/discussions/35). I would be happy for your help to make It better! :wink:\n\n+ [How to use SSR](./docs/ssr.md)\n+ [Try Todos demo on CodeSandbox](https://codesandbox.io/s/todos-use-bettwen-8d2th?file=/src/components/todo-list.jsx)\n+ [The article “Reuse React hooks in state sharing” on dev.to](https://dev.to/betula/reuse-react-hooks-in-state-sharing-1ell)\n\n### Install\n\n```bash\nnpm install use-between\n# or\nyarn add use-between\n```\n\nEnjoy and happy coding!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbetula%2Fuse-between","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbetula%2Fuse-between","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbetula%2Fuse-between/lists"}