{"id":22775471,"url":"https://github.com/chlbri/react-sync","last_synced_at":"2025-03-30T13:15:16.982Z","repository":{"id":240989382,"uuid":"804000903","full_name":"chlbri/react-sync","owner":"chlbri","description":null,"archived":false,"fork":false,"pushed_at":"2024-05-21T19:25:54.000Z","size":65,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-16T09:27:49.737Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/chlbri.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":"2024-05-21T19:06:32.000Z","updated_at":"2024-05-21T19:25:58.000Z","dependencies_parsed_at":"2024-05-21T20:47:23.014Z","dependency_job_id":null,"html_url":"https://github.com/chlbri/react-sync","commit_stats":null,"previous_names":["chlbri/react-sync"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chlbri%2Freact-sync","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chlbri%2Freact-sync/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chlbri%2Freact-sync/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chlbri%2Freact-sync/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chlbri","download_url":"https://codeload.github.com/chlbri/react-sync/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246320198,"owners_count":20758410,"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-12-11T18:32:59.244Z","updated_at":"2025-03-30T13:15:16.964Z","avatar_url":"https://github.com/chlbri.png","language":"TypeScript","readme":"## Add better compatobolity to react state/store libraries\n\n### Example of the xstate selector for react\n\n```typescript\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { useCallback, useRef } from 'react';\nimport type {\n  AnyState,\n  EventObject,\n  Interpreter,\n  State,\n  StateFrom,\n  Typestate,\n} from 'xstate';\nimport { useSync } from '../hook';\nimport { defaultCompare, defaultSelector, getSnapShot } from './utils';\n\nexport default function useSelector\u003c\n  TContext extends object,\n  TEvents extends EventObject = EventObject,\n  TTypestate extends Typestate\u003cTContext\u003e = {\n    value: any;\n    context: TContext;\n  },\n  T = State\u003cTContext, TEvents, any, TTypestate\u003e,\n\u003e(\n  service: Interpreter\u003cTContext, any, TEvents, TTypestate, any\u003e,\n  selector: (\n    emitted: StateFrom\u003c\n      Interpreter\u003cTContext, any, TEvents, TTypestate, any\u003e['machine']\n    \u003e,\n  ) =\u003e T = defaultSelector,\n  compare: (a: T, b: T) =\u003e boolean = defaultCompare,\n): T {\n  const initialStateCacheRef = useRef\u003cAnyState\u003e();\n\n  type Listener = (\n    emitted: StateFrom\u003c\n      Interpreter\u003cTContext, any, TEvents, TTypestate, any\u003e['machine']\n    \u003e,\n  ) =\u003e void;\n\n  // #region Hooks\n  const subscribe = useCallback(\n    (listerner?: Listener) =\u003e {\n      const { unsubscribe } = service.subscribe(listerner);\n      return unsubscribe;\n    },\n    [service],\n  );\n\n  const boundGetSnapshot = useCallback(() =\u003e {\n    return getSnapShot\u003cTContext, TEvents, TTypestate\u003e(\n      service,\n      initialStateCacheRef,\n    );\n  }, [service]);\n  // #endregion\n\n  const selectedSnapshot = useSync(\n    subscribe,\n    boundGetSnapshot,\n    boundGetSnapshot,\n    selector,\n    compare,\n  );\n\n  return selectedSnapshot;\n}\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchlbri%2Freact-sync","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchlbri%2Freact-sync","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchlbri%2Freact-sync/lists"}