{"id":13429537,"url":"https://github.com/saivanji/promise-hook","last_synced_at":"2025-03-16T03:31:48.821Z","repository":{"id":57331334,"uuid":"155256173","full_name":"saivanji/promise-hook","owner":"saivanji","description":"Hook, simplifying dealing with Promises inside of React components","archived":false,"fork":false,"pushed_at":"2019-11-15T06:57:10.000Z","size":14,"stargazers_count":54,"open_issues_count":1,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-05-23T03:18:22.094Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/saivanji.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":"2018-10-29T17:51:52.000Z","updated_at":"2023-03-30T05:27:14.000Z","dependencies_parsed_at":"2022-09-21T02:02:38.188Z","dependency_job_id":null,"html_url":"https://github.com/saivanji/promise-hook","commit_stats":null,"previous_names":["aiven715/promise-hook"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/saivanji%2Fpromise-hook","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/saivanji%2Fpromise-hook/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/saivanji%2Fpromise-hook/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/saivanji%2Fpromise-hook/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/saivanji","download_url":"https://codeload.github.com/saivanji/promise-hook/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":[],"created_at":"2024-07-31T02:00:41.435Z","updated_at":"2025-03-16T03:31:48.554Z","avatar_url":"https://github.com/saivanji.png","language":"JavaScript","funding_links":[],"categories":["Packages"],"sub_categories":[],"readme":"# promise-hook\n\n## Installation\n\nInstall it with yarn:\n\n```\nyarn add promise-hook\n```\n\nOr with npm:\n\n```\nnpm i promise-hook --save\n```\n\n## Demo\n\nThe simplest way to start playing around with `promise-hook` is with this CodeSandbox snippet:\nhttps://codesandbox.io/s/ykmklm6m21\n\n## Simple data fetching\n\nIn order to fetch the data, you need to pass a Promise returning function as a first argument to `usePromise` hook. It will return you back response related payload such as resolved data, request status or the error if it exists.\n\n`resolve` option is used to initiate data fetching when component mounts.\n\n```javascript\nimport React from \"react\";\nimport { usePromise } from \"promise-hook\";\n\nconst Movies = () =\u003e {\n  const { isLoading, data } = usePromise(fetchMovies, { resolve: true });\n\n  return isLoading ? (\n    \u003cdiv\u003eLoading...\u003c/div\u003e\n  ) : (\n    \u003cdiv\u003e\n      {data.map(movie =\u003e (\n        \u003cdiv key={movie.id}\u003e{movie.title}\u003c/div\u003e\n      ))}\n    \u003c/div\u003e\n  );\n};\n\nconst fetchMovies = () =\u003e\n  fetch(`http://your-amazing-api.com/movies`).then(res =\u003e res.json());\n```\n\n## Passing arguments\n\nIn order to pass some arguments to the Promise function, you need to use arrow function wrapper and pass needed argument from a closure.\n\nBy default, when `resolve` option is enabled, data fetching is initiated only on the first render. But you can control it with `resolveCondition` setting. If an array of variables passed will be changed - data fetching will be initiated again.\n\n```javascript\nimport React from \"react\";\nimport { usePromise } from \"promise-hook\";\n\nconst Movies = ({ category }) =\u003e {\n  const { isLoading, data } = usePromise(() =\u003e fetchMovies(category), {\n    resolve: true,\n    resolveCondition: [category]\n  });\n\n  return isLoading ? (\n    \u003cdiv\u003eLoading...\u003c/div\u003e\n  ) : (\n    \u003cdiv\u003e\n      {data.map(movie =\u003e (\n        \u003cdiv key={movie.id}\u003e{movie.title}\u003c/div\u003e\n      ))}\n    \u003c/div\u003e\n  );\n};\n\nconst fetchMovies = category =\u003e\n  fetch(`http://your-amazing-api.com/movies/${category}`).then(res =\u003e\n    res.json()\n  );\n```\n\n## Fetching on demand\n\nWhen you need to send any request on demand instead of component mount, you can use `request` function returned from the `usePromise` hook.\n\nAfter that function is called, data fetching will be started and payload variables such as `isLoading` etc will be updated accordingly.\n\n```javascript\nimport React from \"react\";\nimport { usePromise } from \"promise-hook\";\nimport { Form, Input, Button } from \"./Form\";\n\nconst SignUp = () =\u003e {\n  const { isLoading, request } = usePromise(signUp);\n\n  return (\n    \u003cForm onSubmit={data =\u003e request(data)}\u003e\n      \u003cInput type=\"text\" name=\"full_name\" /\u003e\n      \u003cInput type=\"text\" name=\"email\" /\u003e\n      \u003cInput type=\"password\" name=\"password\" /\u003e\n      \u003cButton\u003e{isLoading ? \"Signing up...\" : \"Sign up\"}\u003c/Button\u003e\n    \u003c/Form\u003e\n  );\n};\n\nconst signUp = data =\u003e\n  fetch(`http://your-amazing-api.com/users`, {\n    method: \"POST\",\n    body: data\n  }).then(res =\u003e res.json());\n```\n\n## Error handling\n\nOnce the error was happened during the request, an `error` variable will be populated with the corresponding error object. You can use it afterwards for displaying apropriate error message in the UI.\n\n```javascript\nimport React from \"react\";\nimport { usePromise } from \"promise-hook\";\n\nconst Movies = () =\u003e {\n  const { isLoading, data, error } = usePromise(fetchMovies, {\n    resolve: true\n  });\n\n  return isLoading ? (\n    \u003cdiv\u003eLoading...\u003c/div\u003e\n  ) : error ? (\n    \u003cdiv\u003eError loading movies - {error.message}\u003c/div\u003e\n  ) : (\n    \u003cdiv\u003e\n      {data.map(movie =\u003e (\n        \u003cdiv key={movie.id}\u003e{movie.title}\u003c/div\u003e\n      ))}\n    \u003c/div\u003e\n  );\n};\n\nconst fetchMovies = () =\u003e\n  fetch(`http://your-amazing-api.com/movies`).then(res =\u003e res.json());\n```\n\n## TODO\n\n- Promise cancelling.\n- Caching.\n- Resetting / Updating response state.\n- Middleware support.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsaivanji%2Fpromise-hook","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsaivanji%2Fpromise-hook","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsaivanji%2Fpromise-hook/lists"}