{"id":13450403,"url":"https://github.com/ilyalesik/react-fetch-hook","last_synced_at":"2025-04-12T20:47:23.336Z","repository":{"id":42483408,"uuid":"162266785","full_name":"ilyalesik/react-fetch-hook","owner":"ilyalesik","description":"React hook for conveniently use Fetch API","archived":false,"fork":false,"pushed_at":"2023-01-06T10:31:29.000Z","size":2927,"stargazers_count":350,"open_issues_count":12,"forks_count":20,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-04-12T20:46:50.392Z","etag":null,"topics":["fetch","fetch-api","flowtype","hacktoberfest","hooks","pagination","react","typescript"],"latest_commit_sha":null,"homepage":"","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/ilyalesik.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":"lm-a"}},"created_at":"2018-12-18T09:54:06.000Z","updated_at":"2025-03-21T15:18:55.000Z","dependencies_parsed_at":"2023-02-05T21:46:13.257Z","dependency_job_id":null,"html_url":"https://github.com/ilyalesik/react-fetch-hook","commit_stats":null,"previous_names":[],"tags_count":28,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ilyalesik%2Freact-fetch-hook","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ilyalesik%2Freact-fetch-hook/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ilyalesik%2Freact-fetch-hook/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ilyalesik%2Freact-fetch-hook/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ilyalesik","download_url":"https://codeload.github.com/ilyalesik/react-fetch-hook/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248631718,"owners_count":21136559,"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":["fetch","fetch-api","flowtype","hacktoberfest","hooks","pagination","react","typescript"],"created_at":"2024-07-31T07:00:34.300Z","updated_at":"2025-04-12T20:47:23.313Z","avatar_url":"https://github.com/ilyalesik.png","language":"JavaScript","funding_links":["https://github.com/sponsors/lm-a"],"categories":["Packages","Extensions/Libraries"],"sub_categories":[],"readme":"# react-fetch-hook\n\n[![CircleCI](https://circleci.com/gh/ilyalesik/react-fetch-hook.svg?style=shield)](https://circleci.com/gh/ilyalesik/react-fetch-hook)\n[![npm version](https://img.shields.io/npm/v/react-fetch-hook.svg)](https://www.npmjs.com/package/react-fetch-hook)\n[![npm downloads](https://img.shields.io/npm/dt/react-fetch-hook.svg)](https://www.npmjs.com/package/react-fetch-hook)\n\nReact hook for conveniently use Fetch API.\n\n* **Tiny** (556 B). Calculated by [size-limit](https://github.com/ai/size-limit)\n* Both **Flow** and **TypeScript** types included\n\n```javascript\nimport React from \"react\";\nimport useFetch from \"react-fetch-hook\";\n\nconst Component = () =\u003e {\n  const { isLoading, data } = useFetch(\"https://swapi.co/api/people/1\");\n\n  return isLoading ? (\n    \u003cdiv\u003eLoading...\u003c/div\u003e\n  ) : (\n    \u003cUserProfile {...data} /\u003e\n  );\n};\n\n```\n\n*useFetch* accepts the same arguments as *fetch* function.\n\n## Installation\n\nInstall it with yarn:\n\n```\nyarn add react-fetch-hook\n```\n\nOr with npm:\n\n```\nnpm i react-fetch-hook --save\n```\n\n## Usage\n\n### Custom formatter\n\nDefault is `response =\u003e response.json()` formatter. You can pass custom formatter:\n\n```javascript\nconst { isLoading, data } = useFetch(\"https://swapi.co/api/people/1\", {\n    formatter: (response) =\u003e response.text()\n});\n\n```\n\n### Error handling\n\nThe `useFetch` hook returns an `error` field at any fetch exception. \nThe `error` field extends [Error](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error)\nand has `status` and `statusText` fields equal to [Response](https://developer.mozilla.org/en-US/docs/Web/API/Response).\n\n```javascript\n...\n\nconst Component = () =\u003e {\n  const { isLoading, data, error } = useFetch(\"https://swapi.co/api/people/1\");\n\n  if (error) {\n    return \u003cdiv\u003e\n      \u003cp\u003eCode: ${error.status}\u003c/p\u003e\n      \u003cp\u003eMessage: ${error.statusText}\u003c/p\u003e\n    \u003c/div\u003e\n  }\n \n  ...\n};\n\n```\n \n### Multiple requests\nMultiple `useFetch` in the same file/component supported:\n\n```javascript\nconst result1 = useFetch(\"https://swapi.co/api/people/1\");\nconst result2 = useFetch(\"https://swapi.co/api/people/2\");\n\nif (result1.isLoading \u0026\u0026 result2.isLoading) {\n  return \u003cdiv\u003eLoading...\u003c/div\u003e;\n}  \n\nreturn \u003cdiv\u003e\n    \u003cUserProfile {...result1.data} /\u003e\n    \u003cUserProfile {...result2.data} /\u003e\n\u003c/div\u003e\n```\n\n### Depends\nThe request will not be called until all elements of `depends` array be truthy. Example:\n\n```javascript\nconst {authToken} = useContext(authTokenContext);\nconst [someState, setSomeState] = useState(false);\nconst { isLoading, data } = useFetch(\"https://swapi.co/api/people/1\", {\n    depends: [!!authToken, someState] // don't call request, if haven't authToken OR someState: false\n});\n\n```\nSee [example](examples/depends).\n\n### Re-call requests\nIf any element of `depends` changed, request will be re-call. For example, you can use [react-use-trigger](https://github.com/ilyalesik/react-use-trigger) for re-call the request:\n```javascript\nimport createTrigger from \"react-use-trigger\";\nimport useTrigger from \"react-use-trigger/useTrigger\";\n\nconst requestTrigger = createTrigger();\n\nexport const Subscriber = () =\u003e {  \n    const requestTriggerValue = useTrigger(requestTrigger);\n    \n    const { isLoading, data } = useFetch(\"https://swapi.co/api/people/1\", {\n        depends: [requestTriggerValue]\n    });\n  \n    return \u003cdiv /\u003e;\n}\n\nexport const Sender = () =\u003e { \n    return \u003cbutton onClick={() =\u003e {\n        requestTrigger() // re-call request\n    }}\u003eSend\u003c/button\u003e\n}\n```\n\n### usePromise\nFor custom promised function.\n\n```javascript\nimport React from \"react\";\nimport usePromise from \"react-fetch-hook/usePromise\";\nimport callPromise from \"...\"\n\nconst Component = () =\u003e {\n  const { isLoading, data } = usePromise(() =\u003e callPromise(...params), [...params]);\n\n  return isLoading ? (\n    \u003cdiv\u003eLoading...\u003c/div\u003e\n  ) : (\n    \u003cUserProfile {...data} /\u003e\n  );\n};\n```\n\n## [Examples](examples)\n\n* [Basic](examples/basic) - Just fetch data with `useFetch`.\n* [Depends](examples/depends) - Usage `depends` option for refresh query.\n* [Pagination](examples/pagination) - Usage `usePaginationRequest` for infinite scroll implementation.\n\n## API\n\n### `useFetch`\nCreate a hook wrapper for `fetch` call. \n```javascript\nuseFetch(\n    path: RequestInfo,\n    options?: {\n        ...RequestOptions,\n        formatter?: Response =\u003e Promise\n        depends?: Array\u003cboolean\u003e\n    },\n    specialOptions?: {\n        formatter?: Response =\u003e Promise\n        depends?: Array\u003cboolean\u003e\n    }\n): TUseFetchResult\n```\nwhere `TUseFetchResult` is:\n```javascript\n{\n    data: any,\n    isLoading: boolean,\n    error: any\n}\n```\n\n `RequestInfo`, `RequestOptions` is [fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch) args.\n\n\n### `usePromise`\n```javascript\nusePromise\u003cT, I: $ReadOnlyArray\u003cmixed\u003e\u003e(\n    callFunction: ?(...args: I) =\u003e Promise\u003cT\u003e,\n    ...inputs: I\n): TUsePromiseResult\u003cT\u003e\n```\nwhere `TUsePromiseResult\u003cT\u003e` is\n```javascript\ntype TUsePromiseResult\u003cT\u003e = {\n    data: ?T,\n    isLoading: boolean,\n    error: mixed\n}\n```\n\n### Experimental: `usePaginatedRequest`\n⚠️ Warning: this method is experimental, API can be changed.\n\nCreate a paginated request. \n```javascript\nusePaginatedRequest = \u003cT\u003e(\n    request: (params: { limit: number, offset: number }) =\u003e Promise\u003cArray\u003cT\u003e\u003e,\n    limit: number,\n    ...depends: Array\u003cany\u003e\n): {\n    data: Array\u003cT\u003e,\n    loadMore?: () =\u003e mixed,\n    hasMore: boolean\n};\n```\n\n## Who Uses react-fetch-hook\n\n### Open Source projects\n\n* [react-figma](https://github.com/react-figma/react-figma)\n* [awesome-web-animation](https://github.com/sergey-pimenov/awesome-web-animation)\n* [redux-helpers](https://github.com/lecstor/redux-helpers)\n* [flowmap.blue](https://github.com/FlowmapBlue/flowmap.blue)\n\n### Companies\n\n* [Redis Agency](https://redis.agency/)\n* [Lessmess Agency](https://lessmess.agency)\n* [BigDatr](https://bigdatr.com/)\n* [Fabrique numérique des Ministères Sociaux](https://incubateur.social.gouv.fr/)\n\n[See more](https://github.com/ilyalesik/react-fetch-hook/network/dependents)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Filyalesik%2Freact-fetch-hook","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Filyalesik%2Freact-fetch-hook","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Filyalesik%2Freact-fetch-hook/lists"}