{"id":23658281,"url":"https://github.com/harryy2510/rehttp","last_synced_at":"2025-09-21T01:23:53.310Z","repository":{"id":40711170,"uuid":"266170121","full_name":"harryy2510/rehttp","owner":"harryy2510","description":"Highly customizable http client library for react","archived":false,"fork":false,"pushed_at":"2023-01-07T20:58:08.000Z","size":3627,"stargazers_count":0,"open_issues_count":28,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-12-29T00:07:36.695Z","etag":null,"topics":["ajax","hook","http","react","rest"],"latest_commit_sha":null,"homepage":"","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/harryy2510.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2020-05-22T17:32:18.000Z","updated_at":"2021-04-05T10:37:51.000Z","dependencies_parsed_at":"2023-02-08T01:45:46.150Z","dependency_job_id":null,"html_url":"https://github.com/harryy2510/rehttp","commit_stats":null,"previous_names":[],"tags_count":24,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/harryy2510%2Frehttp","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/harryy2510%2Frehttp/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/harryy2510%2Frehttp/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/harryy2510%2Frehttp/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/harryy2510","download_url":"https://codeload.github.com/harryy2510/rehttp/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239639310,"owners_count":19672799,"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":["ajax","hook","http","react","rest"],"created_at":"2024-12-29T00:06:50.362Z","updated_at":"2025-09-21T01:23:48.252Z","avatar_url":"https://github.com/harryy2510.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React + HTTP = ReHttp\n\u003e A highly customizable http client library for react\n\n\n[![npm (scoped)](https://badgen.net/npm/v/@harryy/rehttp)](https://npmjs.com/package/@harryy/rehttp)\n[![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n![GitHub](https://badgen.net/github/license/harryy2510/rehttp)\n![npm bundle size (scoped)](https://badgen.net/bundlephobia/minzip/@harryy/rehttp)\n![npm bundle size (scoped)](https://badgen.net/bundlephobia/min/@harryy/rehttp)\n![GitHub top language](https://img.shields.io/github/languages/top/harryy2510/rehttp)\n![David](https://img.shields.io/david/harryy2510/rehttp)\n\n## Features\n\n- [x] No bloated dependencies\n- [x] Optional global configuration\n- [x] Typescript support\n- [x] Promise based\n- [x] Hooks for function component\n- [x] Lazy fetch support\n- [x] Transforming request and response\n- [x] Callbacks for request, response and error\n- [x] Caching\n- [x] Use outside of react context\n- [x] Component (for class based component)\n\n## Installation\n\nYarn:\n\n```bash\nyarn add @harryy/rehttp\n```\n\nNPM:\n\n```bash\nnpm install @harryy/rehttp\n```\n\n## Usage\n\n```tsx\nimport React from 'react'\n\nimport { useReHttp } from 'rehttp'\n\nconst Example: React.FC = () =\u003e {\n    const {data, refetch, loading} = useReHttp({\n        url: 'https://jsonplaceholder.typicode.com/posts/1'\n    })\n    if (loading) {\n        return \u003c\u003eLoading...\u003c/\u003e\n    }\n    return (\n        \u003c\u003e\n            {data.title}\n            \u003cbutton onClick={() =\u003e refetch()}\u003eRefetch\u003c/button\u003e\n        \u003c/\u003e\n     )\n}\n```\n\n## API\n\n##### `const {data, response, error, loading, execute, isRequestInFlight, cached} = useReHttp(request, options?)`\n\nBy default, request will be fired if `lazy: true` is not passed as an option.\n\n`data` contains json serialized data\n\n`response` contains the raw response from the server\n\n`error` contains the error if any\n\n`loading` is `true` only when there is no data or error\n\n`isRequestInFlight` tells whether the request is in flight or not\n\n`execute` can be called with optional `request` parameters to refetch data again\n\n`cached` gives the cached object if the request was cached earlier\n\n\n```tsx\nimport React from 'react'\nimport { useReHttp, ReHttpRequest, ReHttpResponse } from 'rehttp'\n\ninterface Post {\n  id: string,\n  title: string,\n}\ninterface PostError {\n  message: string,\n  status: 'NOTOK',\n}\n\nuseReHttp\u003cPost, PostError\u003e({\n    method: 'GET', // Optional, type: 'DELETE' | 'GET' | 'PATCH' | 'POST' | 'PUT', default: 'GET'\n    url: 'https://jsonplaceholder.typicode.com/posts', // Optional, type: string, default: ''\n    headers: {\n      Accept: 'application/json'\n    }, // Optional, type: Record\u003cstring, string\u003e, default: undefined\n    params: {\n      page: 1,\n      per_page: 5,\n      tags: ['hello', 'world']\n    },  // Optional, type: Record\u003cstring, string | number | Array\u003cstring | number\u003e\u003e, default: undefined\n    body: undefined // Optional, type: any, default: undefined\n}, {\n  transformError: async (e) =\u003e {\n    return {\n      status: 'NOTOK',\n      message: e.message\n    }\n  }, // Optional, type: (data: any) =\u003e Promise\u003cPostError\u003e, default: undefined\n  transformResponse: async (data: any, response: ReHttpResponse) =\u003e {\n      if (data.id \u0026\u0026 response.status === 200) {\n        return {\n          id: data.id,\n          title: data.title.toUpperCase()\n        }\n      } else {\n        return Promise.reject(new Error('Post has no id'))\n      }\n  }, // Optional, type: (data: any, response: ReHttpResponse) =\u003e Promise\u003cPost\u003e, default: undefined\n  transformRequest: async (res: ReHttpRequest) =\u003e {\n    const token = await SomeAsyncStorageOrApiOrWhatever().token\n    return {\n      ...res,\n      params: {\n        foo: 'bar',\n      },\n      headers: {\n        Authorization: `Bearer ${token}`\n      }\n    }\n  }, // Optional, type: (data: ReHttpRequest) =\u003e Promise\u003cReHttpRequest\u003e, default: undefined\n  lazy: true, // Optional, type: boolean, default: false\n  noCache: true, // Optional, type: boolean, default: false\n});\n```\n\n\n##### Need to use in class component? No Problem!\n\n```tsx\nimport React from 'react'\nimport { ReHttp, ReHttpProps } from 'rehttp'\n\ninterface Post {\n  id: string,\n  title: string,\n}\ninterface PostError {\n  message: string,\n  status: 'NOTOK',\n}\n\nclass MyComponent extends React.Component {\n    reHttpProps: Omit\u003cReHttpProps\u003cPost, PostError\u003e, 'children'\u003e = {\n        method: 'GET', // Optional, type: 'DELETE' | 'GET' | 'PATCH' | 'POST' | 'PUT', default: 'GET'\n        url: 'https://jsonplaceholder.typicode.com/posts', // Optional, type: string, default: ''\n        headers: {\n          Accept: 'application/json'\n        }, // Optional, type: Record\u003cstring, string\u003e, default: { Accept: 'application/json', 'Content-Type': 'application/json' }\n        params: {\n          page: 1,\n          per_page: 5,\n          tags: ['hello', 'world']\n        },  // Optional, type: Record\u003cstring, string | number | Array\u003cstring | number\u003e\u003e, default: undefined\n        body: undefined, // Optional, type: any, default: undefined\n        onRequest: () =\u003e {\n            showLoader()\n        }, //Optional, type: (data: ReHttpRequest) =\u003e Promise\u003cvoid\u003e\n        onResponse: () =\u003e {\n            showSuccess('request success')\n        }, //Optional, type: (data: Post, response: ReHttpResponse) =\u003e Promise\u003cvoid\u003e\n        onError: (error) =\u003e {\n            showAlert(error.message)\n        }, // Optional, type: (error: PostError) =\u003e Promise\u003cvoid\u003e\n\n        transformError: async (e) =\u003e {\n            return {\n              status: 'NOTOK',\n              message: e.message\n            }\n        }, // Optional, type: (data: any) =\u003e Promise\u003cPostError\u003e, default: undefined\n        transformResponse: async (data: any, response: ReHttpResponse) =\u003e {\n          if (data.id \u0026\u0026 response.status === 200) {\n            return {\n              id: data.id,\n              title: data.title.toUpperCase()\n            }\n          } else {\n            return Promise.reject(new Error('Post has no id'))\n          }\n        }, // Optional, type: (data: any, response: ReHttpResponse) =\u003e Promise\u003cPost\u003e, default: undefined\n        transformRequest: async (res: ReHttpRequest) =\u003e {\n        const token = await SomeAsyncStorageOrApiOrWhatever().token\n        return {\n          ...res,\n          params: {\n            foo: 'bar',\n          },\n          headers: {\n            Authorization: `Bearer ${token}`\n          }\n        }\n        }, // Optional, type: (data: ReHttpRequest) =\u003e Promise\u003cReHttpRequest\u003e, default: undefined\n        lazy: true, // Optional, type: boolean, default: false\n        noCache: true, // Optional, type: boolean, default: false\n    }\n    render() {\n        \u003cReHttp\u003cPost, PostError\u003e {...this.reHttpProps}\u003e\n          {\n            ({data, refetch}) =\u003e (\n              \u003c\u003e\n                {data.title}\n                \u003cbutton onClick={() =\u003e refetch()}\u003eRefetch\u003c/button\u003e\n              \u003c/\u003e\n          )\n        \u003c/ReHttp\u003e\n    }\n}\n```\n\n\n##### Need to set options globally? No problem!\n\n#### `ReHttpProvider`\n\n```tsx\nimport React from 'react'\n\nimport { ReHttpProvider, ReHttpProviderProps, ReHttpRequest, ReHttpResponse, InMemoryAdapter } from 'rehttp'\n\nconst App: React.FC = () =\u003e {\n    const options: ReHttpProviderProps = {\n        cacheAdapter: new InMemoryAdapter({ttl: 5 * 60 * 1000, size: 50}),  // Optional, type: CacheAdapter, params: {ttl?: 5 * 60* 1000, size?: 50}?, ttl is in milliseconds\n        cacheMethods: ['GET'], // Optional, type: Array\u003cReHttpRequest['method']\u003e, default: ['GET'], http methods that needs to be cached\n        baseUrl: 'https://jsonplaceholder.typicode.com', // Optional, type: string\n        method: 'GET', // Optional, type: 'DELETE' | 'GET' | 'PATCH' | 'POST' | 'PUT'\n        params: {}, // Optional, type: Record\u003cstring, string | number | Array\u003cstring | number\u003e\u003e\n        headers: {}, // Optional, type: Record\u003cstring, string\u003e\n        onRequest: () =\u003e {\n            showLoader()\n        }, //Optional, type: (data: ReHttpRequest) =\u003e Promise\u003cvoid\u003e\n        onResponse: () =\u003e {\n            showSuccess('request success')\n        }, //Optional, type: (data: any, response: ReHttpResponse) =\u003e Promise\u003cvoid\u003e\n        onError: (error) =\u003e {\n            showAlert(error.message)\n        }, // Optional, type: (error: any) =\u003e Promise\u003cvoid\u003e\n        onComplete: (dataOrError, response) =\u003e {\n            hideLoader()\n        }, // Optional, type: (dataOrError: any, response?: ReHttpResponse) =\u003e Promise\u003cvoid\u003e\n        transformError: async (e) =\u003e {\n            return {\n                status: 'NOTOK',\n                message: e.message\n            }\n        }, // Optional, type: (data: any) =\u003e Promise\u003cPostError\u003e, default: undefined\n        transformResponse: async (data: any, response: ReHttpResponse) =\u003e {\n            if (data.id \u0026\u0026 response.status === 200) {\n                return {\n                    id: data.id,\n                    title: data.title.toUpperCase()\n                }\n            } else {\n                return Promise.reject(new Error('Post has no id'))\n            }\n        }, // Optional, type: (data: any, response: ReHttpResponse) =\u003e Promise\u003cPost\u003e, default: undefined\n        transformRequest: async (res: ReHttpRequest) =\u003e {\n            const token = await SomeAsyncStorageOrApiOrWhatever().token\n            return {\n                ...res,\n                params: {\n                    foo: 'bar',\n                },\n                headers: {\n                    Authorization: `Bearer ${token}`\n                }\n            }\n        }, // Optional, type: (data: ReHttpRequest) =\u003e Promise\u003cReHttpRequest\u003e, default: undefined\n        lazy: true, // Optional, type: boolean\n    }\n    return (\n        \u003cReHttpProvider {...options}\u003e\n            \u003cMain /\u003e\n        \u003c/ReHttpProvider\u003e\n    )\n}\n```\n\n##### Need to use it outside of react context (like redux thunk etc.) and still use context values? No Problem!\n\n#### `reHttpInstance`\n\n```tsx\nimport React from 'react'\n\nimport { reHttpInstance } from 'rehttp'\n\nreHttpInstance({\n  url: 'https://jsonplaceholder.typicode.com'\n}).then(res =\u003e {\n  console.log('Response from ReHttp', res)\n}) // option lazy: true will have no effect here\n\nconst MyComponent: React.FC = () =\u003e {\n    return \u003cdiv\u003eHello World!\u003c/div\u003e\n}\n```\n\n\n## License\n\nMIT © [harryy2510](https://github.com/harryy2510)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fharryy2510%2Frehttp","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fharryy2510%2Frehttp","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fharryy2510%2Frehttp/lists"}