{"id":13429586,"url":"https://github.com/pedronasser/resynced","last_synced_at":"2025-03-16T03:31:53.070Z","repository":{"id":91179335,"uuid":"155793996","full_name":"pedronasser/resynced","owner":"pedronasser","description":"An experimental hook that lets you have multiple components using multiple synced states using no context provider","archived":true,"fork":false,"pushed_at":"2019-03-03T19:33:42.000Z","size":139,"stargazers_count":18,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-10-27T07:32:33.894Z","etag":null,"topics":["hooks","react","react-hooks","redux","state-management"],"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/pedronasser.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,"governance":null,"roadmap":null,"authors":null}},"created_at":"2018-11-02T00:49:49.000Z","updated_at":"2024-03-27T13:52:25.000Z","dependencies_parsed_at":"2023-06-05T06:30:42.932Z","dependency_job_id":null,"html_url":"https://github.com/pedronasser/resynced","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/pedronasser%2Fresynced","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pedronasser%2Fresynced/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pedronasser%2Fresynced/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pedronasser%2Fresynced/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pedronasser","download_url":"https://codeload.github.com/pedronasser/resynced/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243822309,"owners_count":20353496,"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":["hooks","react","react-hooks","redux","state-management"],"created_at":"2024-07-31T02:00:42.121Z","updated_at":"2025-03-16T03:31:52.766Z","avatar_url":"https://github.com/pedronasser.png","language":"TypeScript","funding_links":[],"categories":["Packages"],"sub_categories":[],"readme":"# Resynced (experimental)\n\n\u003cp\u003e\n  \u003cimg src=\"https://badgen.net/npm/v/resynced\" /\u003e\n  \u003cimg src=\"https://badgen.net/badge/license/MIT/blue\" /\u003e\n\u003c/p\u003e\n\n## ❤️ Motivation\n\nThis is an experimental hook that lets you have **multiple components** using **multiple synced states** using **no context provider**.\n\nAnd also provide a way of using that synced state with [Redux](https://redux.js.org/)!\n\n**This package requires the Hooks API available only in React 16.7.0-alpha.0 or later.**\n\n## 💻 Example\n\n- [Simple Example](https://codesandbox.io/s/3yyr3w7zym)\n- [Resynced With Redux](https://codesandbox.io/s/1yx3n0nz7q)\n\n## 🔧 Install\n\n```bash\n$ yarn add resynced\n```\n\n## 🚀 How to Use\n\n\n```jsx\nimport { createSynced } from 'resynced'\n\nconst initialState = \"John\"\nconst [useSyncedState] = createSynced(initialState)\n\nconst UsingSharedState = () =\u003e {\n  const [name, setName] = useSyncedState()\n\n  return (\n    \u003cdiv\u003e\n      \u003ch1\u003eMy name is {name}\u003c/h1\u003e\n      \u003cbutton onClick={() =\u003e setName(\"Jorge\")}\u003eChange Name\u003c/button\u003e\n    \u003c/div\u003e\n  )\n}\n```\n\n### Using with Redux\n\nLet's first setup our synced redux store (you must have redux installed in your project)\n\n```js\nimport { createSyncedRedux } from \"resynced\"\nimport { createStore } from \"redux\"\n\nconst initialState = {\n  authenticated: false\n}\n\nconst reducer = (state = initialState, action) =\u003e {\n  switch (action.type) {\n    case \"LOGIN\":\n      return { ...state, authenticated: true }\n    case \"LOGOUT\":\n      return { ...state, authenticated: false }\n    default:\n      return state\n  }\n}\n\nconst authStore = createStore(reducer)\nconst [useSyncedAuth] = createSyncedRedux(authStore)\n\nexport default useSyncedAuth\n```\n\nNow we can use that synced redux in any component without the need of adding a Context Provider anywhere.\n\n```js\nimport React from 'react'\nimport useAuth from './authStore'\n\nconst ComponentUsingAuth = React.memo(() =\u003e {\n  // This component will only update when the 'authenticated'\n  // property is updated\n  const [{ authenticated }, dispatch] = useAuth([\"authenticated\"])\n\n  return (\n    \u003cdiv\u003e\n      \u003ch1\u003eAuthenticated? {authenticated ? \"Yes\" : \"No\"}\u003c/h1\u003e\n      \u003cbutton onClick={() =\u003e dispatch({ type: \"LOGIN\" })}\u003eLogin\u003c/button\u003e\n      \u003cbutton onClick={() =\u003e dispatch({ type: \"LOGOUT\" })}\u003eLogout\u003c/button\u003e\n    \u003c/div\u003e\n  )\n})  \n\nexport ComponentUsingAuth\n```\n\nYou can check this working example here: [Resynced With Redux](https://codesandbox.io/s/1yx3n0nz7q)\n\n### Conditional updates\n\n#### Using a list of properties\n\nThe component local state will only be synced if any of the given properties of the state object changes (only works with object states).\n\n```js\nimport { createSynced }  from 'resynced'\n\nconst initialState = {\n  name: \"John\"\n}\nconst [useSyncedState] = createSynced(initialState)\n\nconst UsingSharedState = () =\u003e {\n  const [state, setState] = useSyncedState([\"name\"])\n\n  return (\n    \u003cdiv\u003e\n      \u003ch1\u003eMy name is {name}\u003c/h1\u003e\n      \u003cbutton onClick={() =\u003e setState({ name: \"Jorge\" })}\u003eChange Name\u003c/button\u003e\n    \u003c/div\u003e\n  )\n}\n```\n\n#### Using functions\n\nThe component local state will only be synced if the return of the given function is **true**.\n\n```js\nimport { createSynced } from 'resynced'\n\nconst [useSyncedState] = createSynced(\"John\")\n\nconst UsingSharedState = () =\u003e {\n  const [name, setName] = useSyncedState((newState, prevState) =\u003e {\n    return newState !== \"Foo\"\n  })\n\n  return (\n    \u003cdiv\u003e\n      \u003ch1\u003eMy name is {name}\u003c/h1\u003e\n      \u003cbutton onClick={() =\u003e setName(\"Jorge\")}\u003eChange Name\u003c/button\u003e\n    \u003c/div\u003e\n  )\n}\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpedronasser%2Fresynced","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpedronasser%2Fresynced","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpedronasser%2Fresynced/lists"}