{"id":15046428,"url":"https://github.com/vikyw89/usesyncv","last_synced_at":"2026-01-06T16:50:30.228Z","repository":{"id":147268248,"uuid":"618688474","full_name":"vikyw89/useSyncV","owner":"vikyw89","description":"a simplistic react global store with pregenerated CRUD, and built in async fetch","archived":false,"fork":false,"pushed_at":"2023-05-16T06:49:41.000Z","size":782,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"dev","last_synced_at":"2025-03-02T05:54:00.074Z","etag":null,"topics":["data","fetch","mobx","reactjs","reactquery","redux","state","state-management","store","swr","zustand"],"latest_commit_sha":null,"homepage":"https://vikyw89.github.io/useSyncV/","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/vikyw89.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,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-03-25T03:51:38.000Z","updated_at":"2023-04-22T10:01:39.000Z","dependencies_parsed_at":null,"dependency_job_id":"fcde4b1d-3f21-4273-8a7c-72e739379222","html_url":"https://github.com/vikyw89/useSyncV","commit_stats":{"total_commits":199,"total_committers":2,"mean_commits":99.5,"dds":0.0653266331658291,"last_synced_commit":"a91af3ede9ba850bec48f5ba32ce6ef9ee19847f"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vikyw89%2FuseSyncV","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vikyw89%2FuseSyncV/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vikyw89%2FuseSyncV/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vikyw89%2FuseSyncV/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vikyw89","download_url":"https://codeload.github.com/vikyw89/useSyncV/tar.gz/refs/heads/dev","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245814746,"owners_count":20676808,"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":["data","fetch","mobx","reactjs","reactquery","redux","state","state-management","store","swr","zustand"],"created_at":"2024-09-24T20:53:05.864Z","updated_at":"2026-01-06T16:50:30.186Z","avatar_url":"https://github.com/vikyw89.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# useSyncV\n\nDOC : https://vikyw89.github.io/useSyncV/\n\nNPM: https://www.npmjs.com/package/use-sync-v\n\nGH: https://github.com/vikyw89/useSyncV\n\nbreaking change on v3\n\nWhy use sync v ?\n\n- in front all we want is to get synced data from backend\n  - recreating database in front end in a global state is tedious\n  - just subscribe to the data that we need, that we can access anywhere in front end\n- opinionated\n\n## To start\n\n```jsx\nnpm i use-sync-v\n```\n\n## Usage Example\n\n### To subscribe data from backend for backend without built in subscription\n\n- You want to have a global store that fetch data from backend\n- everytime you modify the backend data, useAsyncSubV will refetch the data for you\n- we use stale data while refetching by default\n- loading and data state can both be true at the same time\n- when the component is dismounted, all fetched data will be erased\n\n```jsx\nconst asyncFn = async () =\u003e {\n  const response = await fetch('https://randomuser.me/api/');\n  const data = await response.json();\n  return data;\n};\n\nexport const UseAsyncSubVTest = () =\u003e {\n  // this will subscribe this component to 'randomUser', whenever we do setAsyncFn with 'randomUser' as selector, the data will refetch\n  const { data, loading, error } = useAsyncSubV('randomUser', asyncFn);\n\n  const refetchHandler = async () =\u003e {\n    // we want to modify backend data\n    asyncRefetchV('randomUser', async (p) =\u003e {\n      // we can set the data here for optimistic rendering (optional)\n      setSyncV('randomUser', someDataForOptimisticRendering);\n\n      // we can put function here to post / modify data in backend database\n      await insertDataToRandomUserTable();\n\n      // useAsyncSubV will automatically refetch data\n    });\n  };\n  return (\n    \u003cdiv\u003e\n      {loading \u0026\u0026 \u003cdiv\u003eLoading\u003c/div\u003e}\n      {data \u0026\u0026 \u003cdiv\u003e{JSON.stringify(data)}\u003c/div\u003e}\n      {error \u0026\u0026 \u003cdiv\u003eerror\u003c/div\u003e}\n      \u003cbutton onClick={refetchHandler}\u003erefetch\u003c/button\u003e\n    \u003c/div\u003e\n  );\n};\n\n// let's say we have another component that we want to use the data from 'randomUser'\nexport const AnotherComponent = () =\u003e {\n  // access data from 'randomUser' earlier\n  const { data, loading, error } = useAsyncV('randomUser');\n  return (\n    \u003cdiv\u003e\n      {loading \u0026\u0026 \u003cdiv\u003eLoading\u003c/div\u003e}\n      {data \u0026\u0026 \u003cdiv\u003e{JSON.stringify(data)}\u003c/div\u003e}\n      {error \u0026\u0026 \u003cdiv\u003eerror\u003c/div\u003e}\n      \u003cbutton onClick={refetchHandler}\u003erefetch\u003c/button\u003e\n    \u003c/div\u003e\n  );\n};\n```\n### To subscribe data from backend for backend with built in subscription\n\n```jsx\nexport const AsyncSubTest = () =\u003e {\n  const {data, loading, error} = useAsyncV('random')\n\n  useEffect(()=\u003e{\n    // set up subscription \n    // then modify state data with \n    setAsyncV('random', dataReturnedFromSubscription)\n    // this way, everytime there's a new data sent from backend, it will automatically stored to 'random' state\n  },[])\n}\n```\n### To have a global state, like redux, zustand etc\n\n```jsx\nsetSyncV('counter', 0);\n// create a counter state with initial value of 0\n// this is not a hook, you can call the function anywhere\n\nsetSyncV('counter', (p) =\u003e p + 1);\n// this will increment counter state by 1\n\nsetSyncV('data', [\n  {\n    name: 'Irene'\n  },\n  {\n    name: 'Irenelle'\n  }\n]);\n// this will store an Array of Object into \"data\" state\n```\n\nUpdating a deeply nested object is easy\n\n```jsx\nsetSyncV('data[0].phone_number', '010039945');\n// this will add phone number field to the first object in our Array under the name Irene\n\ngetSyncV('data[0]');\n// =\u003e {\n//   name:'Irene',\n//   phone_number:'010039945'\n// }\n```\n\n### To have our react component listens to state change with selector\n\n```jsx\nexport const CounterDisplayComponent = () =\u003e {\n  const data = useSyncV('data[0]');\n  // sync this component to \"data[0]\" state, will re render component whenever the value of \"data[0]\" state changes\n};\n```\n\n### To recap:\n\n#### For sync global state\n\n```jsx\nsetSyncV(selector:string, updates:function(previousValue) || value)\n// to update the value of the state selector using an updater function or a value\n// the updater function take a parameter (original state) and return a value (updated state)\n// if given a value, it will replace existing value with the value\n\nuseSyncV(selector:string)\n// to subscribe to the state selector, and will re render the component whenever the value change\n// be specific in the selector to prevent unnecessary rerendering\n```\n\n#### For async global state\n- with backend without built in subscription\n```jsx\nuseAsyncSubV(selector:string, asyncFn:function, config?:obj)\n// to subscribe to backend\n\nuseAsyncV(selector:string, config?:object)\n// will subscribe to the selector, and if there's no existing data, it will prepopulate it with {loading, data, error} initial state\n\nasyncRefetchV(selector:string, asyncFn:function, config?:object)\n// to fetch a data from api, save the results into the store\n\n```\n- with backend with built in subscription like Firestore\n```jsx\nuseAsyncV(selector:string)\n// to listen to asyncData\n\nsetAsyncV(selector:string, asyncFn:function, config?:object)\n//\n```\nfor more explanation: look at the code snippet\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvikyw89%2Fusesyncv","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvikyw89%2Fusesyncv","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvikyw89%2Fusesyncv/lists"}