{"id":21404755,"url":"https://github.com/fakundo/react-axios-hoc","last_synced_at":"2026-05-07T13:36:31.279Z","repository":{"id":26881376,"uuid":"109630918","full_name":"fakundo/react-axios-hoc","owner":"fakundo","description":"React Higher-Order Component (HOC) for observing and invoking axios requests","archived":false,"fork":false,"pushed_at":"2023-01-07T04:02:40.000Z","size":2297,"stargazers_count":1,"open_issues_count":16,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-07-06T03:40:52.971Z","etag":null,"topics":["axios","hoc","react"],"latest_commit_sha":null,"homepage":"https://fakundo.github.io/react-axios-hoc/","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/fakundo.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":"2017-11-06T01:05:29.000Z","updated_at":"2021-04-15T11:14:20.000Z","dependencies_parsed_at":"2022-09-20T04:56:31.677Z","dependency_job_id":null,"html_url":"https://github.com/fakundo/react-axios-hoc","commit_stats":null,"previous_names":["fakundo/react-action-observer"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/fakundo/react-axios-hoc","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fakundo%2Freact-axios-hoc","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fakundo%2Freact-axios-hoc/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fakundo%2Freact-axios-hoc/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fakundo%2Freact-axios-hoc/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fakundo","download_url":"https://codeload.github.com/fakundo/react-axios-hoc/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fakundo%2Freact-axios-hoc/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266944876,"owners_count":24010489,"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","status":"online","status_checked_at":"2025-07-25T02:00:09.625Z","response_time":70,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["axios","hoc","react"],"created_at":"2024-11-22T16:17:55.602Z","updated_at":"2026-05-07T13:36:26.238Z","avatar_url":"https://github.com/fakundo.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-axios-hoc\n\n[![npm](https://img.shields.io/npm/v/react-axios-hoc.svg)](https://www.npmjs.com/package/react-axios-hoc)\n\nReact Higher-Order Component (HOC) for observing and invoking `axios` requests.\n\nFeatures:\n- can rerender component when request status changes\n- can abort requests when unmounting component\n- can abort request on second call\n\n### Installation\n\n```\nnpm i react-axios-hoc\n```\n\n### Demo\n\n[Demo](https://fakundo.github.io/react-axios-hoc/) \n/ \n[Source](https://github.com/fakundo/react-axios-hoc/tree/master/examples)\n\n### Usage\n\n```js\nimport React, { Component, Fragment } from 'react'\nimport PropTypes from 'prop-types'\nimport axios from 'axios'\nimport withActions from 'react-axios-hoc'\n\nclass Dog extends Component {\n  static propTypes = {\n    fetchDogAction: PropTypes.object.isRequired,\n  }\n\n  handleClick = () =\u003e {\n    const { fetchDogAction } = this.props\n    fetchDogAction.run()\n  }\n\n  render() {\n    const { fetchDogAction } = this.props\n    const { isPending, isFailed, isSucceded, error, result } = fetchDogAction\n    return (\n      \u003cFragment\u003e\n        \u003cbutton onClick={this.handleClick}\u003e\n          Random Dog\n        \u003c/button\u003e\n\n        { isPending \u0026\u0026 (\n          \u003cdiv\u003e\n            Loading...\n          \u003c/div\u003e\n        ) }\n\n        { isFailed \u0026\u0026 (\n          \u003cdiv\u003e\n            { error.message }\n          \u003c/div\u003e\n        ) }\n\n        { isSucceded \u0026\u0026 (\n          \u003cdiv\u003e\n            \u003cimg src={result.data.message} /\u003e\n          \u003c/div\u003e\n        ) }\n      \u003c/Fragment\u003e\n    )\n  }\n}\n\nconst mapActionsToProps = {\n  fetchDogAction: cancelToken =\u003e () =\u003e (\n    axios('https://dog.ceo/api/breeds/image/random', {\n      cancelToken\n    })\n  )\n}\n\nexport default withActions(mapActionsToProps)(Dog)\n```\n\n#### Action `run` returns a promise\n\n```js\n...\n\nhandleClick = async () =\u003e {\n  const { fetchDogAction } = this.props\n  try {\n    const dog = await fetchDogAction.run()\n    console.log('Fetched dog: ', dog)\n  }\n  catch (error) {\n    console.log('Error occured while fetching a dog: ', error.message)\n  }\n}\n\n...\n```\n\n#### Invoking action with arguments\n\n```js\n...\n\nconst mapActionsToProps = {\n  fetchUserAction: cancelToken =\u003e id =\u003e (\n    axios(`/users/${id}`, { cancelToken })\n  )\n}\n\n...\n\nfetchUserAction.run({\n  params: [userId]\n})\n\n...\n```\n\n## API\n\n#### HOC creator params\n\n- `mapActionsToProps = { ... }` - function or object that defines actions. If it's a function then component props will be passed to it.\n- `options = { abortPendingOnUnmount: true }`\n\n#### Structure of action object\n\n- `isDefault` - `true` if action never ran\n- `isPending` - `true` if request is pending\n- `isSucceded` - `true` if request has succeded\n- `isFailed` - `true` if request has failed\n- `result` - result of request\n- `error` - error occured while performing request\n- `run(runOptions)` - starts request\n- `reset(resetOptions)` - resets action (aborts request \u0026 resets status)\n\n#### `runOptions`\n\n- `params = []` - params will be passed to axios action\n- `silent = false` - disables throwing errors\n- `abortPending = true` - aborts previous request if it's still running\n- `updateComponent = true` - invokes component rerender on status change\n- `updateComponentOnPending = true`\n- `updateComponentOnSuccess = true`\n- `updateComponentOnFailure = true`\n\n#### `resetOptions`\n\n- `updateComponent = true` - invokes component rerender\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffakundo%2Freact-axios-hoc","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffakundo%2Freact-axios-hoc","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffakundo%2Freact-axios-hoc/lists"}