{"id":13441089,"url":"https://github.com/bsonntag/react-use-promise","last_synced_at":"2025-04-06T17:12:34.926Z","repository":{"id":33207385,"uuid":"155019874","full_name":"bsonntag/react-use-promise","owner":"bsonntag","description":"React hook for handling promises.","archived":false,"fork":false,"pushed_at":"2024-01-09T17:42:04.000Z","size":2859,"stargazers_count":93,"open_issues_count":5,"forks_count":8,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-03T10:01:39.553Z","etag":null,"topics":["hook","promise","react","react-hooks"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-use-promise","language":"JavaScript","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/bsonntag.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}},"created_at":"2018-10-27T23:51:26.000Z","updated_at":"2024-12-04T15:51:06.000Z","dependencies_parsed_at":"2024-01-16T18:58:37.510Z","dependency_job_id":"ddbf90c9-ea42-4266-8d43-11e737da07a8","html_url":"https://github.com/bsonntag/react-use-promise","commit_stats":{"total_commits":78,"total_committers":9,"mean_commits":8.666666666666666,"dds":0.5769230769230769,"last_synced_commit":"6be7067743fcbdefd2d0fbd4a7c30736b49047fa"},"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bsonntag%2Freact-use-promise","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bsonntag%2Freact-use-promise/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bsonntag%2Freact-use-promise/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bsonntag%2Freact-use-promise/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bsonntag","download_url":"https://codeload.github.com/bsonntag/react-use-promise/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247517915,"owners_count":20951719,"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":["hook","promise","react","react-hooks"],"created_at":"2024-07-31T03:01:29.800Z","updated_at":"2025-04-06T17:12:34.886Z","avatar_url":"https://github.com/bsonntag.png","language":"JavaScript","funding_links":[],"categories":["HarmonyOS","JavaScript"],"sub_categories":["Windows Manager"],"readme":"# react-use-promise\n\n[![CircleCI](https://circleci.com/gh/bsonntag/react-use-promise.svg?style=svg)](https://circleci.com/gh/bsonntag/react-use-promise)\n\nReact hook for handling promises.\n\n## Disclaimer\n\nWhile this works and is an interesting use of hooks,\nit might be a better idea to use Suspense when dealing with promises.\n\nSuspense isn't still fully released, but you can start using it with\n[`React.lazy`](https://reactjs.org/docs/code-splitting.html#suspense).\n\n## Installation\n\nUsing npm:\n\n```sh\n$ npm install --save react-use-promise\n```\n\nUsing yarn:\n\n```sh\n$ yarn add react-use-promise\n```\n\nSince this module uses React's new [Hooks feature](https://reactjs.org/docs/hooks-intro.html),\nto try this out you'll need to install at least version `16.8.0`\nof `react` and `react-dom`:\n\n```sh\n$ yarn add react@^16.8.0 react-dom@^16.8.0\n```\n\n## Usage\n\n```js\nimport React, { useMemo } from 'react';\nimport usePromise from 'react-use-promise';\n\nfunction Example() {\n  const [result, error, state] = usePromise(\n    () =\u003e new Promise(resolve =\u003e {\n      setTimeout(() =\u003e resolve('foo'), 2000);\n    }),\n    []\n  );\n\n  return (\n    \u003cdiv\u003e\n      \u003cp\u003e{state}\u003c/p\u003e\n      \u003cp\u003e{result || error}\u003c/p\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n## API\n\n```js\nusePromise\u003cResult, Error\u003e(\n  Promise\u003cResult, Error\u003e | () =\u003e Promise\u003cResult, Error\u003e,\n  Array\u003cany\u003e\n): [\n  Result,\n  Error,\n  'pending' | 'resolved' | 'rejected'\n]\n```\n\nReceives a promise or a function that returns a promise and returns an array\nwith the promise's result, error and state. The state is a string that can\nhave one of three values: `'pending'`, `'resolved'` or `'rejected'`.\n\n**Note:** You'll need to pass the inputs array to `usePromise`, otherwise\nthis will try to resolve the promise on every render. For example:\n\n```js\nconst [response, error] = usePromise(\n  () =\u003e fetch(url),\n  [url]\n);\n```\n\nThis will only call `fetch` again when the `url` changes.\n\nIf you only want to resolve the promise once, pass an empty array, like this:\n\n```js\nconst [result, error] = usePromise(\n  () =\u003e Notification.requestPermission(),\n  []\n);\n```\n\n## Development\n\nClone the repo and install the dependencies by running `yarn` on the project's\nroot directory (or `npm install`, if you don't have yarn installed).\n\nTests can be run with `yarn test` (or `npm test`) and there's an example\napplication that can be run with `yarn example` (or `npm run example`).\n\n## Contributing\n\nPlease feel free to submit any issues or pull requests.\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbsonntag%2Freact-use-promise","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbsonntag%2Freact-use-promise","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbsonntag%2Freact-use-promise/lists"}