{"id":19043094,"url":"https://github.com/kobir1989/react-cache-rx","last_synced_at":"2026-02-11T19:05:28.971Z","repository":{"id":253536661,"uuid":"843356822","full_name":"kobir1989/react-cache-rx","owner":"kobir1989","description":"\"react-cache-rx\" A library for managing data fetching and caching in React applications.","archived":false,"fork":false,"pushed_at":"2024-08-19T17:02:30.000Z","size":352,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-21T20:08:49.392Z","etag":null,"topics":["caching","custom-hooks","data-fetching","fetch-api","mutation","performance","react","react-cache","react-hooks","usemutation"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-cache-rx?activeTab=readme","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/kobir1989.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,"publiccode":null,"codemeta":null}},"created_at":"2024-08-16T10:37:58.000Z","updated_at":"2025-01-11T10:50:47.000Z","dependencies_parsed_at":"2024-08-19T20:11:31.610Z","dependency_job_id":"296cb84f-4cbe-4467-899c-ffa7ef06ef4e","html_url":"https://github.com/kobir1989/react-cache-rx","commit_stats":null,"previous_names":["kobir1989/react-cache","kobir1989/react-cache-rx"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/kobir1989/react-cache-rx","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kobir1989%2Freact-cache-rx","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kobir1989%2Freact-cache-rx/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kobir1989%2Freact-cache-rx/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kobir1989%2Freact-cache-rx/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kobir1989","download_url":"https://codeload.github.com/kobir1989/react-cache-rx/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kobir1989%2Freact-cache-rx/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29341725,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-11T18:58:20.535Z","status":"ssl_error","status_checked_at":"2026-02-11T18:56:44.814Z","response_time":97,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["caching","custom-hooks","data-fetching","fetch-api","mutation","performance","react","react-cache","react-hooks","usemutation"],"created_at":"2024-11-08T22:40:13.348Z","updated_at":"2026-02-11T19:05:28.955Z","avatar_url":"https://github.com/kobir1989.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-cache-rx\n\n![npm version](https://img.shields.io/badge/npm-v1.0.1-blue)\n![License](https://img.shields.io/badge/license-MIT-green)\n![Downloads](https://img.shields.io/npm/dt/react-cache-rx)\n![GitHub stars](https://img.shields.io/github/stars/kobir1989/react-cache-rx)\n![GitHub forks](https://img.shields.io/github/forks/kobir1989/react-cache-rx)\n![GitHub issues](https://img.shields.io/github/issues/kobir1989/react-cache-rx)\n![GitHub pull requests](https://img.shields.io/github/issues-pr/kobir1989/react-cache-rx)\n![Maintenance](https://img.shields.io/maintenance/yes/2024)\n\nThe `react-cache-rx` library provides powerful custom hooks, `useFetch()` and `useMutation()`, for efficient data fetching, response caching, and seamless management of retries, loading states, and error handling. Supporting HTTP methods such as POST, DELETE, and PUT, this library leverages IndexedDB for robust caching and offers a comprehensive set of options for easy and flexible integration into your React applications.\n\n## Installation\n\n```bash\nnpm install fetch-cache-rx\n\n```\n\n## Global Configuration with ConfigProvider\n\nTo use the `useFetch` hook, you need to wrap your component tree with the `ConfigProvider` and provide the configuration:\n\nThe ConfigProvider allows you to set global configurations that will apply across your entire application. This is useful for settings like baseUrl, authentication tokens, default headers, and more.\n\n### Basic Example\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { ConfigProvider } from 'fetch-cache-rx'\nimport App from './App'\n\nconst config = {\n  baseUrl: 'https://api.example.com',\n  token: 'your-token'\n}\n\nReactDOM.render(\n  \u003cConfigProvider config={config}\u003e\n    \u003cApp /\u003e\n  \u003c/ConfigProvider\u003e,\n  document.getElementById('root')\n)\n```\n\n### Available Configuration Options\n\nThe `ConfigProvider` allows you to configure your requests globally, similar to how you would with Axios. Here are all the available configuration options you can set:\n\n| Option               | Description                                                                                         | Default          |\n| -------------------- | --------------------------------------------------------------------------------------------------- | ---------------- |\n| **baseUrl**          | (optional) Base URL for all requests.                                                               | `''`             |\n| **token**            | (optional) Authentication token to be included in requests.                                         |                  |\n| **defaultHeaders**   | (optional) Object representing default headers to include in every request.                         |                  |\n| **timeout**          | (optional) Timeout duration for requests in milliseconds.                                           | `0` (no timeout) |\n| **withCredentials**  | (optional) Boolean indicating whether to include credentials in cross-site Access-Control requests. | `false`          |\n| **xsrfCookieName**   | (optional) The name of the cookie to use as a value for the XSRF token.                             | `'XSRF-TOKEN'`   |\n| **xsrfHeaderName**   | (optional) The name of the HTTP header that carries the XSRF token value.                           | `'X-XSRF-TOKEN'` |\n| **onRequestStart**   | (optional) Callback function triggered at the start of a request.                                   |                  |\n| **onRequestError**   | (optional) Callback function triggered when a request fails.                                        |                  |\n| **onRequestSuccess** | (optional) Callback function triggered when a request succeeds.                                     |                  |\n| **onRequestEnd**     | (optional) Callback function triggered at the end of a request.                                     |                  |\n\n### Advanced Configuration Example\n\n```js\nconst config = {\n  baseUrl: 'https://api.example.com',\n  token: 'your-token',\n  defaultHeaders: {\n    'Content-Type': 'application/json',\n    Authorization: `Bearer your-token`\n  },\n  timeout: 5000, // in milliseconds\n  withCredentials: true,\n  responseType: 'json',\n  xsrfCookieName: 'MY-XSRF-TOKEN',\n  xsrfHeaderName: 'MY-X-XSRF-TOKEN',\n  onRequestStart: (url, options) =\u003e {\n    console.log(`Starting request to ${url} with options:`, options)\n  },\n  onRequestError: error =\u003e {\n    console.error('Request failed:', error)\n  },\n  onRequestSuccess: response =\u003e {\n    console.log('Request succeeded:', response)\n  },\n  onRequestEnd: () =\u003e {\n    console.log('Request ended')\n  }\n}\n\nReactDOM.render(\n  \u003cConfigProvider config={config}\u003e\n    \u003cApp /\u003e\n  \u003c/ConfigProvider\u003e,\n  document.getElementById('root')\n)\n```\n\n### `useFetch` Hook\n\n```js\nimport React from 'react'\nimport { useFetch } from 'fetch-cache-rx'\n\nconst MyComponent = () =\u003e {\n  const { data, error, loading, isError, fetchData } = useFetch('/api/data', {\n    retries: 3,\n    retryDelay: 2000,\n    cacheDuration: 30000,\n    onSuccess: data =\u003e console.log('Data fetched successfully:', data),\n    onError: error =\u003e console.error('Error fetching data:', error)\n  })\n\n  if (loading) return \u003cp\u003eLoading...\u003c/p\u003e\n  if (isError) return \u003cp\u003eError: {error?.message}\u003c/p\u003e\n\n  return (\n    \u003cdiv\u003e\n      \u003ch1\u003eData\u003c/h1\u003e\n      \u003cpre\u003e{JSON.stringify(data, null, 2)}\u003c/pre\u003e\n      \u003cbutton onClick={() =\u003e fetchData()}\u003eRefetch\u003c/button\u003e\n    \u003c/div\u003e\n  )\n}\n\nexport default MyComponent\n```\n\n### Options Properties\n\n| Option                | Description                                                                                               | Default              |\n| --------------------- | --------------------------------------------------------------------------------------------------------- | -------------------- |\n| **revalidateOnFocus** | (optional) Boolean indicating whether to revalidate data when the window regains focus.                   | `false`              |\n| **retries**           | (optional) Number of times to retry fetching data in case of failure.                                     | `3`                  |\n| **retryDelay**        | (optional) Delay in milliseconds between retries.                                                         | `4000` (4 seconds)   |\n| **cacheDuration**     | (optional) Duration in milliseconds to cache the response.                                                | `30000` (30 seconds) |\n| **isInvalidate**      | (optional) Boolean indicating whether to invalidate the cache entry for the URL before fetching new data. |                      |\n| **isFetchOnClick**    | (optional) Boolean indicating whether to fetch data only when `fetchData` is called.                      | `false`              |\n| **onSuccess**         | (optional) Callback function called when data is successfully fetched.                                    |                      |\n| **onError**           | (optional) Callback function called when an error occurs during fetching.                                 |                      |\n| **onSettled**         | (optional) Callback function called after the fetch attempt completes, regardless of success or failure.  |                      |\n\n### `useMutation` Hook\n\nThe `useMutation` hook is a custom React hook designed to handle `POST`, `PUT`, and `DELETE` requests. It simplifies the process of performing these operations by managing loading, error, and success states, while also allowing for easy configuration and customization.\n\n### Basic Example\n\nHere's a basic example of how to use the `useMutation` hook to create a new resource using a `POST` request:\n\n```js\nimport React from 'react'\nimport { useMutation } from 'fetch-cache-rx'\n\nconst MyComponent = () =\u003e {\n  const { mutate, data, error, loading } = useMutation(\n    '/api/resource',\n    'POST',\n    {\n      onSuccess: data =\u003e console.log('Mutation successful:', data),\n      onError: error =\u003e console.error('Mutation failed:', error)\n    }\n  )\n\n  const handleSubmit = () =\u003e {\n    const payload = { name: 'New Resource' }\n    mutate(payload)\n  }\n\n  if (loading) return \u003cp\u003eLoading...\u003c/p\u003e\n  if (error) return \u003cp\u003eError: {error.message}\u003c/p\u003e\n\n  return (\n    \u003cdiv\u003e\n      \u003cbutton onClick={handleSubmit}\u003eCreate Resource\u003c/button\u003e\n      {data \u0026\u0026 \u003cp\u003eResource created: {JSON.stringify(data)}\u003c/p\u003e}\n    \u003c/div\u003e\n  )\n}\n\nexport default MyComponent\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkobir1989%2Freact-cache-rx","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkobir1989%2Freact-cache-rx","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkobir1989%2Freact-cache-rx/lists"}