{"id":17800377,"url":"https://github.com/stefee/react-promise-state-hook","last_synced_at":"2025-04-09T23:11:00.425Z","repository":{"id":45608539,"uuid":"384436150","full_name":"stefee/react-promise-state-hook","owner":"stefee","description":"A simple React hook that provides state for async actions.","archived":false,"fork":false,"pushed_at":"2021-12-05T16:47:47.000Z","size":8542,"stargazers_count":2,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-09T23:10:49.648Z","etag":null,"topics":["async","hook","loading","promise","react","react-hooks","state"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"unlicense","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/stefee.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-07-09T12:52:03.000Z","updated_at":"2022-10-15T00:25:51.000Z","dependencies_parsed_at":"2022-09-26T22:01:31.154Z","dependency_job_id":null,"html_url":"https://github.com/stefee/react-promise-state-hook","commit_stats":null,"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stefee%2Freact-promise-state-hook","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stefee%2Freact-promise-state-hook/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stefee%2Freact-promise-state-hook/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stefee%2Freact-promise-state-hook/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/stefee","download_url":"https://codeload.github.com/stefee/react-promise-state-hook/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248125608,"owners_count":21051770,"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":["async","hook","loading","promise","react","react-hooks","state"],"created_at":"2024-10-27T12:20:28.346Z","updated_at":"2025-04-09T23:11:00.393Z","avatar_url":"https://github.com/stefee.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-promise-state-hook\n\nThe `usePromiseState` hook provides you with React state for a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) returned from an async function, including its **status** (`NOT_STARTED`, `PENDING`, `FULFILLED` or `REJECTED`) and its **resolved** or **rejected** value. The API is heavily inspired by [Apollo GraphQL `useQuery` hook](https://www.apollographql.com/docs/react/data/queries/).\n\nInstall:\n\n```sh\nnpm install react-promise-state-hook\n```\n\nAlternatively, you may copy [the source code](https://github.com/stefee/react-promise-state-hook/blob/main/usePromiseState.ts) directly into your project as this library is published under the Unlicense license.\n\nUsage example:\n\n```tsx\nimport * as React from \"react\";\nimport {usePromiseState, PromiseStatus} from \"react-promise-state-hook\";\n\nconst MyApp = () =\u003e {\n  const [fetchCustomer, fetchCustomerState] = usePromiseState(\n    React.useCallback(async () =\u003e {\n      // Do asynchronous stuff here.\n    }, []),\n  );\n\n  if (fetchCustomerState.status === PromiseStatus.FULFILLED) {\n    return \u003cCustomer data={fetchCustomerState.value} /\u003e;\n  }\n\n  return (\n    \u003cdiv\u003e\n      \u003cbutton\n        onClick={fetchCustomer}\n        disabled={fetchCustomerState.status === PromiseStatus.PENDING}\n      \u003e\n        Start\n      \u003c/button\u003e\n      {fetchCustomerState.status === PromiseStatus.REJECTED \u0026\u0026 (\n        \u003cdiv\u003eError: {fetchCustomerState.err.message}\u003c/div\u003e\n      )}\n    \u003c/div\u003e\n  );\n};\n```\n\n## Options\n\nBy default, any errors thrown by an async callback will be caught and logged using [`console.error`](https://developer.mozilla.org/en-US/docs/Web/API/console/error).\n\nThe `createUsePromiseState` function allows you to set a custom `onError` handler:\n\n```tsx\nimport {createUsePromiseState} from \"react-promise-state-hook\";\n\nconst handleError = (error: unknown) =\u003e {\n  // Do error reporting here.\n};\n\nexport const usePromiseState = createUsePromiseState({onError: handleError});\n```\n\n```tsx\nconst [fetchCustomer, fetchCustomerState] = usePromiseState(\n  React.useCallback(async () =\u003e {\n    // Do asynchronous stuff here.\n  }, []),\n);\n```\n\nYou can override the `onError` handler when calling `usePromiseState`:\n\n```tsx\nconst [fetchCustomer, fetchCustomerState] = usePromiseState(\n  React.useCallback(async () =\u003e {\n    // Do asynchronous stuff here.\n  }, []),\n  {\n    onError: React.useCallback((error: unknown) =\u003e {\n      // Do error reporting here.\n    }, []),\n  },\n);\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstefee%2Freact-promise-state-hook","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstefee%2Freact-promise-state-hook","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstefee%2Freact-promise-state-hook/lists"}