{"id":19174405,"url":"https://github.com/cdhawke/react-axios-localstorage","last_synced_at":"2026-05-14T08:43:22.960Z","repository":{"id":143904752,"uuid":"437887032","full_name":"cdhawke/react-axios-localstorage","owner":"cdhawke","description":"React + Axios hook for client browser localstorage caching.","archived":false,"fork":false,"pushed_at":"2021-12-14T02:25:26.000Z","size":510,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-04T01:35:13.603Z","etag":null,"topics":["axios","cache","http","localstorage","react"],"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/cdhawke.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","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":"2021-12-13T13:38:27.000Z","updated_at":"2021-12-14T02:26:37.000Z","dependencies_parsed_at":"2023-04-19T09:47:36.321Z","dependency_job_id":null,"html_url":"https://github.com/cdhawke/react-axios-localstorage","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cdhawke%2Freact-axios-localstorage","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cdhawke%2Freact-axios-localstorage/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cdhawke%2Freact-axios-localstorage/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cdhawke%2Freact-axios-localstorage/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cdhawke","download_url":"https://codeload.github.com/cdhawke/react-axios-localstorage/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240254182,"owners_count":19772386,"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":["axios","cache","http","localstorage","react"],"created_at":"2024-11-09T10:17:40.431Z","updated_at":"2026-05-14T08:43:17.921Z","avatar_url":"https://github.com/cdhawke.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-axios-localstorage\n\n`react-axios-localstorage` is a simple hook that wraps `axios` and automatically serializes and caches the results in browser localstorage. This package is not designed to be used on the server, but the main functionality is wrapped in `useEffect`, so should be safe to use in the context of `Next.js`. The hook will attempt to read the value from localstorage before subsequent requests, and supports several forms of cache invalidation.\n\n**Important:** Only `axios.get` requests are supported and will be cached.\n\n## Install\n\n\u003e **Prerequisites**: peerDependencies include `axios \u003e= 0.22.0` and `react 16.8.0 || \u003e= 17.0.0`\n\nUsing npm\n\n```sh\nnpm install --save react-axios-localstorage\n```\n\nUsing yarn\n\n```sh\nyarn add react-axios-localstorage\n```\n\n## Usage\n\n### Default implementation\n\nThis will create a localstorage entry with the cache key `products`, for the endpoint `/api/v1/products`.\n\n```tsx\nimport useAxiosCache from 'react-axios-localstorage';\n\nconst Component: React.FC\u003cany\u003e = () =\u003e {\n  const { data, error, loading } = useAxiosCache(\n    'products',\n    'https://mysite.com/api/v1/products'\n  );\n\n  if (loading) {\n    return \u003c\u003eLoading ...\u003c/\u003e;\n  }\n\n  if (error) {\n    return \u003c\u003e{error}\u003c/\u003e;\n  }\n\n  return \u003c\u003e{data}\u003c/\u003e;\n};\n```\n\nBy default, the query string parameters (if any) are used as a unique invalidator that will cause the cached endpoint to be invalidated.\n\n```tsx\nconst { data, error, loading } = useAxiosCache(\n  'products',\n  'https://mysite.com/api/v1/products?query=true'\n);\n\n// Triggers a network request to refresh the data - invalidating the previously cached `query=true` data\nconst { data, error, loading } = useAxiosCache(\n  'products',\n  'https://mysite.com/api/v1/products?query=false'\n);\n```\n\n### Custom invalidations\n\nAdvanced configuration can be specified to manually override several different values. See [Configuration](#configuration) for full set of values.\n\n```tsx\nconst { loggedIn } = useAuthorization();\nconst { previewMode } = useCMSPreviewMode();\nconst { data, error, loading } = useAxiosCache(\n  'products',\n  'https://mysite.com/api/v1/products?query=true',\n  {\n    invalidator: loggedIn, // Will cause the cache to be invalidated based on the `loggedIn` status in addition to the `query` parameter\n    invalidationMS: 10 * 60 * 1000, // 10 minutes\n    bypass: previewMode, // If previewMode is true, the cache will be bypassed.\n    prefix: 'abc', // Produces the cache key 'abc_products'.\n    version: process.env.MY_UNIQUE_SHA,\n  }\n);\n```\n\n## Configuration\n\n| Option           | Type      | Default                                                                                                         | Purpose                                                                                                       |\n| ---------------- | --------- | --------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- |\n| `invalidator`    | `string`  | `undefined` if no query string parameters are provided, otherwise it will use the query string parameter values | Used as a custom field for determining when to refresh the cached localstorage value                          |\n| `bypass`         | `boolean` | `false`                                                                                                         | Indicates whether to skip caching and cache checking for an individual request - useful for CMS preview modes |\n| `prefix`         | `string`  | `ral`                                                                                                           | Added to the front of each cache key to provide uniqueness                                                    |\n| `version`        | `string`  | `process.env.GITHUB_ACTIONS \u0026\u0026 process.env.GITHUB_SHA`                                                          | Used for version-based invalidations on CI/CD redeploys or releases                                           |\n| `invalidationMS` | `number`  | `300000` (5 minutes)                                                                                            | A time in ms after which the cache key will be invalidated                                                    |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcdhawke%2Freact-axios-localstorage","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcdhawke%2Freact-axios-localstorage","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcdhawke%2Freact-axios-localstorage/lists"}