{"id":13450651,"url":"https://github.com/sergey-s/use-axios-react","last_synced_at":"2025-03-23T16:31:51.626Z","repository":{"id":35097346,"uuid":"206189322","full_name":"sergey-s/use-axios-react","owner":"sergey-s","description":"React axios hooks for CRUD","archived":false,"fork":false,"pushed_at":"2023-01-04T09:05:00.000Z","size":556,"stargazers_count":32,"open_issues_count":11,"forks_count":9,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-04-24T15:45:33.329Z","etag":null,"topics":["axios","hooks","react-axios","react-hooks"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sergey-s.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-09-03T23:28:01.000Z","updated_at":"2024-03-21T06:57:59.000Z","dependencies_parsed_at":"2023-01-15T13:47:21.156Z","dependency_job_id":null,"html_url":"https://github.com/sergey-s/use-axios-react","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/sergey-s%2Fuse-axios-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sergey-s%2Fuse-axios-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sergey-s%2Fuse-axios-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sergey-s%2Fuse-axios-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sergey-s","download_url":"https://codeload.github.com/sergey-s/use-axios-react/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245130871,"owners_count":20565735,"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","hooks","react-axios","react-hooks"],"created_at":"2024-07-31T07:00:37.001Z","updated_at":"2025-03-23T16:31:51.308Z","avatar_url":"https://github.com/sergey-s.png","language":"JavaScript","funding_links":[],"categories":["Packages"],"sub_categories":[],"readme":"\u003cdiv\u003e\nWARNING: not maintained, feel free to fork and use in any way\n\u003c/div\u003e\n\u003cp align=\"center\"\u003e\n\u003cdiv align=\"center\"\u003e\n  \u003cpre\u003enpm i axios use-axios-react\u003c/pre\u003e\n\u003c/div\u003e\n\n## Features\n\n- Hooks for ✅ data fetching ✅ CRUD ✅ Batch operations\n- ✅ Request cancellation\n- ✅ Retry/reload callbacks\n- ✅ Zero-configuration, yet fully configurable when needed\n- ✅ No app architecture commitments, drop in into your React and Axios project and start using hooks in your new components\n- No extra-dependencies (React and Axios are peer dependencies), thus minimum overhead if your project already uses axios\n- All axios features\n\n## Installation\n\n```\nnpm i use-axios-react\n```\n\nMake sure axios itself is installed\n\n```\nnpm i axios\n```\n\nAnd make sure you use React v16.8.0 or newer.\n\n## Examples \n\n\u003cb\u003eBasic data fetching (GET)\u003c/b\u003e\n\n[![Edit Fetch example](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/fetch-with-reload-retry-hlmb2?fontsize=14)\n\n```js\nimport React from \"react\";\nimport { useGetData } from \"use-axios-react\";\n\nconst KanyeQuote = () =\u003e {\n  const [data, loading] = useGetData(\"https://api.kanye.rest/\");\n\n  if (loading) return \u003cdiv\u003eLoading...\u003c/div\u003e;\n\n  return \u003cblockquote\u003e{data.quote}\u003c/blockquote\u003e;\n};\n```\n\n\u003cb\u003eCancellable fetching (GET) with reload and retry\u003c/b\u003e\n\n[![Edit Cancelable fetch with reload \u0026 retry](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/fetch-with-reload-retry-ghrd8?fontsize=14)\n\n```js\nimport React from \"react\";\nimport { useGetData } from \"use-axios-react\";\n\nconst KanyeQuote = () =\u003e {\n  const [data, loading, { error, retry }] = useGetData(\"https://api.kanye.rest/\", { cancelable: true });\n\n  if (loading) return \u003cSpinner /\u003e;\n  if (error) return \u003cButton onClick={retry} label=\"RETRY\" /\u003e;\n\n  return (\n    \u003cdiv\u003e\n      \u003cQuote\u003e{data.quote}\u003c/Quote\u003e\n      \u003cButton onClick={retry} label=\"RELOAD\" /\u003e\n    \u003c/Fragment\u003e\n  );\n};\n```\n\n\u003cb\u003eBasic POST example\u003c/b\u003e\n\n[![Edit POST example](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/post-example-8x59c?fontsize=14)\n\n```js\nimport React from \"react\";\nimport { usePostCallback } from \"use-axios-react\";\n\nfunction userToRequest({ name, job }) {\n  return {\n    url: \"https://reqres.in/api/users\",\n    data: { name, job }\n  };\n}\n\nconst CreateUser = () =\u003e {\n  const [create, sending, { error, data }] = usePostCallback(userToRequest);\n\n  const neo = { name: \"Neo\", job: \"The One\" };\n  const morpheus = { name: \"Morpheus\", job: \"Leader\" };\n\n  return (\n    \u003cLayout\u003e\n      \u003cButton onClick={() =\u003e create(neo)}\u003eNeo\u003c/Button\u003e\n      \u003cButton onClick={() =\u003e create(morpheus)}\u003eMorpheus\u003c/Button\u003e\n      \u003cStatusBar sending={sending} error={error} lastUser={data} /\u003e\n    \u003c/Layout\u003e\n  );\n};\n```\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cb\u003ePagination\u003c/b\u003e\u003c/summary\u003e\n\n[![Edit Pagination](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/react-pagination-with-axios-hooks-9j5dr?fontsize=14)\n\n```js\nimport React, { useState } from \"react\";\nimport { useGetData } from \"use-axios-react\";\n\nconst PaginatedKanyeQuotes = () =\u003e {\n  const [page, setPage] = useState(1);\n  const [data, loading] = useGetData(\n    { url: \"https://api.kanye.rest/\", params: { page } },\n    { cancelable: true }\n  );\n\n  if (loading) return \u003cSpinner /\u003e;\n\n  const prev = () =\u003e setPage(page - 1);\n  const next = () =\u003e setPage(page + 1);\n\n  return (\n    \u003cdiv\u003e\n      \u003cQuote\u003e{data.quote}\u003c/Quote\u003e\n      \u003cdiv\u003e\n        \u003cButton onClick={prev} disabled={page \u003c= 1} label=\"← Prev\" /\u003e\n        \u003cspan className=\"mx-5\"\u003ePage {page}\u003c/span\u003e\n        \u003cButton onClick={next} disabled={page \u003e= 9} label=\"Next →\" /\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  );\n};\n```\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cb\u003eBasic TodoMVC CRUD\u003c/b\u003e\u003c/summary\u003e\n\n[![Edit TodoMVC CRUD](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/todomvc-crud-y77vf?fontsize=14)\n\n```js\nimport React from \"react\";\nimport axios from \"axios\";\nimport {\n  provideAxiosInstance,\n  useGetData,\n  usePostCallback,\n  useDeleteCallback,\n  usePatchCallback\n} from \"use-axios-react\";\n\nprovideAxiosInstance(\n  axios.create({\n    baseURL: \"https://todo-backend-golang-goa.herokuapp.com\"\n  })\n);\n\n/**\n * Map todos to axios request configs\n */\nconst todoObjectToAxiosRequest = ({ id, title, order, completed }) =\u003e ({\n  url: id ? `/todos/${id}` : \"/todos\",\n  data: { title, order, completed }\n});\n\nconst TodoMvcApp = () =\u003e {\n  // Reusing the same mapping function for all CRUD requests\n  const [create, creating, { error: createError }] = usePostCallback(todoObjectToAxiosRequest);\n  const [remove, removing, { error: removeError }] = useDeleteCallback(todoObjectToAxiosRequest);\n  const [update, updating, { error: updateError }] = usePatchCallback(todoObjectToAxiosRequest);\n\n  // Re-fetch after any of actions is completed\n  const allRequestsDone = !creating \u0026\u0026 !removing \u0026\u0026 !updating;\n  const [todos = [], fetching, { error: fetchError }] = useGetData(\"/todos\", {\n    // The hook will re-run every time `depends` changes\n    depends: [creating, removing, updating],\n    // Actual request will be performed only if this is true\n    willRun: allRequestsDone\n  });\n\n  if (createError || removeError || updateError || fetchError) {\n    return \u003cdiv\u003eError occurred, please reload\u003c/div\u003e;\n  }\n\n  return (\n    \u003cLayout\u003e\n      \u003cHeader loading={creating || removing || updating || fetching}\u003e\n        \u003cNewTodo create={create} /\u003e\n      \u003c/Header\u003e\n      \u003cTodoList todos={todos} remove={remove} update={update} loading={fetching} /\u003e\n    \u003c/Layout\u003e\n  );\n};\n```\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cb\u003eCommon state GET \u0026 POST\u003c/b\u003e\u003c/summary\u003e\n  \n[![Edit Common state GET \u0026 POST](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/common-state-get-post-z93n5?fontsize=14)\n\n```js\nimport React, { useEffect } from \"react\";\nimport { useGetData, usePostCallback } from \"use-axios-react\";\n\nconst CreateUser = () =\u003e {\n  \n  // Do an initial load\n  const [users = [], loading, { error: loadError, setData: setUsers }] = useGetData(\"https://reqres.in/api/users\");\n\n  // We're particularly interested in the create() callback and the response data (new user data)\n  const [create, creating, { error: createError, data: newUser }] = usePostCallback(\"https://reqres.in/api/users\");\n\n  // Update users state evey time the newUser changes\n  useEffect(\n    () =\u003e {\n      newUser \u0026\u0026 setUsers([...users, newUser]);\n    },\n    [newUser]\n  );\n\n  return (\n    \u003cLayout\u003e\n      \u003cButton onClick={() =\u003e create({})}\u003eCreate dummy user\u003c/Button\u003e\n\n      \u003cspan\u003e{(loading || creating) \u0026\u0026 \"Loading...\"}\u003c/span\u003e\n      \u003cspan\u003e{(loadError || createError) \u0026\u0026 \"Error occurred\"}\u003c/span\u003e\n\n      \u003cUserList users={users} /\u003e\n    \u003c/Layout\u003e\n  );\n};\n```\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cb\u003eUsing custom axios instance\u003c/b\u003e\u003c/summary\u003e\n\n[![Edit Using custom axios instance](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/using-custom-axios-instance-vq8bq?fontsize=14)\n\n\n```js\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport axios from \"axios\";\nimport { provideAxiosInstance, useGetData } from \"use-axios-react\";\n\nconst customAxiosInstance = axios.create({\n  baseURL: \"https://reqres.in/api\",\n  transformResponse: axios.defaults.transformResponse.concat(data =\u003e {\n    return data.data;\n  })\n});\n\nprovideAxiosInstance(customAxiosInstance);\n\nfunction App() {\n  const [users, loading] = useGetData(\"/users\");\n\n  if (loading) return \"Loading...\";\n\n  return (\n    \u003cdiv\u003e\n      \u003ch1\u003eUsers:\u003c/h1\u003e\n      \u003ccode\u003e{JSON.stringify(users)}\u003c/code\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\u003c/details\u003e\n\n### Example apps\n\n- [Full featured TodoMVC app](https://github.com/sergey-s/todomvc-react-hooks-api-crud)\n\n### API Overview\n\n#### Hooks\n\n\u003ctable\u003e\n\u003ctr\u003e\n    \u003ctd\u003e\u003ccode\u003euseGetData()\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003e\n        Use this one if you need to \u003cb\u003efetch data\u003c/b\u003e depending on some state \n        (e.g. to fetch search results depending on search term)\n    \u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n    \u003ctd\u003e\n        \u003cbr/\u003e\n        \u003ccode\u003eusePostCallback()\u003c/code\u003e\u003cbr/\u003e\u003cbr/\u003e\n        \u003ccode\u003eusePutCallback()\u003c/code\u003e\u003cbr/\u003e\u003cbr/\u003e\n        \u003ccode\u003eusePatchCallback()\u003c/code\u003e\u003cbr/\u003e\u003cbr/\u003e\n        \u003ccode\u003euseDeleteCallback()\u003c/code\u003e\u003cbr/\u003e\u003cbr/\u003e\n        \u003ccode\u003euseGetCallback()\u003c/code\u003e\u003cbr/\u003e\u003cbr/\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n        Use this if you need to \u003cb\u003ecreate callbacks to trigger a request\u003c/b\u003e programmatically\n    \u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n    \u003ctd\u003e\n        \u003cbr/\u003e\n        \u003ccode\u003euseParallelPostCallback()\u003c/code\u003e\u003cbr/\u003e\u003cbr/\u003e\n        \u003ccode\u003euseParallelPutCallback()\u003c/code\u003e\u003cbr/\u003e\u003cbr/\u003e\n        \u003ccode\u003euseParallelPatchCallback()\u003c/code\u003e\u003cbr/\u003e\u003cbr/\u003e\n        \u003ccode\u003euseParallelDeleteCallback()\u003c/code\u003e\u003cbr/\u003e\u003cbr/\u003e\n        \u003ccode\u003euseParallelGetCallback()\u003c/code\u003e\u003cbr/\u003e\u003cbr/\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n        Use this if you need to \u003cb\u003ecreate callbacks to trigger batch requests\u003c/b\u003e\n    \u003c/td\u003e\n\u003c/tr\u003e\n\u003c/table\u003e\n\n#### Settings\n\n\u003ctable\u003e\n\u003ctr\u003e\n    \u003ctd\u003e\u003ccode\u003eprovideAxiosInstance()\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003e\n        Provide a custom axios instance to use with the hooks\n    \u003c/td\u003e\n\u003c/tr\u003e\n\u003c/table\u003e\n\n### API Reference\n\n-------------------\n\n#### `useGetData(url|axiosConfig, options): []`\n\n- `url|axiosConfig` \u0026mdash; Refer to [axios request config](https://github.com/axios/axios#request-config) documentation for details\n- `options` \u0026mdash; The `use{...}Data` hook options:\n\n\u003ctable\u003e\n\u003ctr\u003e\n    \u003ctd\u003e\u003ccode\u003ecancelable:\u0026nbsp;bool\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003eWhether the request should be canceled on component unmount\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n    \u003ctd\u003e\u003ccode\u003edepends:\u0026nbsp;[]\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003e\n        Hook's effect will be re-run only if one of the passed array values changes.\n        Refer to the \u003ca href=\"https://reactjs.org/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects\"\u003eReact useEffect(effect, depends)\u003c/a\u003e\n        second argument docs to learn how it works.\n    \u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n    \u003ctd\u003e\u003ccode\u003ewillRun:\u0026nbsp;bool\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003eRequest will be be executed only if this option is true. This is usually an expression such as \u003ccode\u003ewillRun: !loading\u003c/code\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/table\u003e\n\n- result array structure is `[data, loading, { error, response, retry, retriesCount, setData }]`:\n\n-------------------\n\n#### `use{Method}Callback(url|axiosConfig|factory, options): []`\n\nWhere {Method} is one of the following: `Post, Put, Patch, Delete, Get` \n\n* `url|axiosConfig|factory` \u0026mdash; Request URL, axios config object or factory, producing an axios config object from \ncallback args\n\n- result array structure is `[exec, loading, { error, retry, response, data, execCount, input }]`:\n\n-------------------\n\n#### `useParallel{Method}Callback(axiosConfigFactory): []`\n\nWhere {Method} is one of the following: `Post, Put, Patch, Delete, Get` \n\n* `axiosConfigFactory` \u0026mdash; A function producing an axios config object from \ncallback args\n\n- result array structure is `[exec, loading, { retry, errors, responses, data, succeed, failed, execCount, input }]`\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsergey-s%2Fuse-axios-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsergey-s%2Fuse-axios-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsergey-s%2Fuse-axios-react/lists"}