{"id":13793331,"url":"https://github.com/sheaivey/react-axios","last_synced_at":"2025-04-04T23:09:51.544Z","repository":{"id":13988719,"uuid":"75585877","full_name":"sheaivey/react-axios","owner":"sheaivey","description":"Axios Components for React with child function callback","archived":false,"fork":false,"pushed_at":"2023-03-01T04:44:09.000Z","size":1212,"stargazers_count":180,"open_issues_count":6,"forks_count":20,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-10-11T13:40:23.096Z","etag":null,"topics":["api","async-component","axios","axios-instance","axiosprovider","component","prop-types","react","react-axios"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/sheaivey.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}},"created_at":"2016-12-05T03:39:30.000Z","updated_at":"2024-05-31T10:00:24.000Z","dependencies_parsed_at":"2024-01-12T10:25:52.383Z","dependency_job_id":"dc34633e-183f-45d7-866c-dcc208f379ef","html_url":"https://github.com/sheaivey/react-axios","commit_stats":{"total_commits":105,"total_committers":8,"mean_commits":13.125,"dds":0.3904761904761904,"last_synced_commit":"bf92a7052753a245c162a43349ade39151fb3169"},"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sheaivey%2Freact-axios","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sheaivey%2Freact-axios/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sheaivey%2Freact-axios/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sheaivey%2Freact-axios/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sheaivey","download_url":"https://codeload.github.com/sheaivey/react-axios/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247261612,"owners_count":20910108,"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":["api","async-component","axios","axios-instance","axiosprovider","component","prop-types","react","react-axios"],"created_at":"2024-08-03T23:00:18.910Z","updated_at":"2025-04-04T23:09:51.526Z","avatar_url":"https://github.com/sheaivey.png","language":"JavaScript","funding_links":[],"categories":["Uncategorized"],"sub_categories":["Uncategorized"],"readme":"\n[![npm](https://img.shields.io/npm/v/react-axios.svg)](https://www.npmjs.com/package/react-axios)\n[![Build Status](https://travis-ci.org/sheaivey/react-axios.svg?branch=master)](https://travis-ci.org/sheaivey/react-axios)\n[![npm](https://img.shields.io/npm/l/react-axios.svg)](https://github.com/sheaivey/react-axios/blob/master/LICENSE)\n[![npm](https://img.shields.io/npm/dt/react-axios.svg)](https://www.npmjs.com/package/react-axios)\n# react-axios\nAxios Component for React with child function callback.\nThis is intended to allow in render async requests.\n\n## Features\n\n- Same great features found in [Axios](https://github.com/mzabriskie/axios)\n- Component driven\n- Child function callback ***(error, response, isLoading, makeRequest, axios) =\u003e { }***\n- Auto cancel previous requests\n- Debounce to prevent rapid calls.\n- Request only invoked on prop change and *isReady* state.\n- Callback props for ***onSuccess***, ***onError***, and ***onLoading***\n- Supports custom axios instances through ***props*** or a ***\u0026lt;AxiosProvider ... \u0026gt;***\n- Create your own request components wrapped using the ***withAxios({options})(ComponentToBeWrapped)*** HoC\n\n## Installing\n\nUsing npm:\n\n```bash\n$ npm install react-axios\n```\n\nAlso install the required peer dependancies if you have not already done so:\n\n```bash\n$ npm install axios\n$ npm install react\n$ npm install prop-types\n```\n\n## Components \u0026 Properties\n\n#### Base Request Component\n```jsx\n\u003cRequest\n  instance={axios.create({})} /* custom instance of axios - optional */\n  method=\"\" /* get, delete, head, post, put and patch - required */\n  url=\"\" /*  url endpoint to be requested - required */\n  data={} /* post data - optional */\n  params={} /* queryString data - optional */\n  config={} /* axios config - optional */\n  debounce={200} /* minimum time between requests events - optional */\n  debounceImmediate={true} /* make the request on the beginning or trailing end of debounce - optional */\n  isReady={true} /* can make the axios request - optional */\n  onSuccess={(response)=\u003e{}} /* called on success of axios request - optional */\n  onLoading={()=\u003e{}} /* called on start of axios request - optional */\n  onError=(error)=\u003e{} /* called on error of axios request - optional */\n/\u003e\n```\n\n#### Helper Components\n```jsx\n\u003cGet ... /\u003e\n\u003cDelete ... /\u003e\n\u003cHead ... /\u003e\n\u003cPost ... /\u003e\n\u003cPut ... /\u003e\n\u003cPatch ... /\u003e\n```\n\n## Example\n\nInclude in your file\n\n```js\nimport { AxiosProvider, Request, Get, Delete, Head, Post, Put, Patch, withAxios } from 'react-axios'\n```\n\nPerforming a `GET` request\n\n```js\n// Post a request for a user with a given ID\nrender() {\n  return (\n    \u003cdiv\u003e\n      \u003cGet url=\"/api/user\" params={{id: \"12345\"}}\u003e\n        {(error, response, isLoading, makeRequest, axios) =\u003e {\n          if(error) {\n            return (\u003cdiv\u003eSomething bad happened: {error.message} \u003cbutton onClick={() =\u003e makeRequest({ params: { reload: true } })}\u003eRetry\u003c/button\u003e\u003c/div\u003e)\n          }\n          else if(isLoading) {\n            return (\u003cdiv\u003eLoading...\u003c/div\u003e)\n          }\n          else if(response !== null) {\n            return (\u003cdiv\u003e{response.data.message} \u003cbutton onClick={() =\u003e makeRequest({ params: { refresh: true } })}\u003eRefresh\u003c/button\u003e\u003c/div\u003e)\n          }\n          return (\u003cdiv\u003eDefault message before request is made.\u003c/div\u003e)\n        }}\n      \u003c/Get\u003e\n    \u003c/div\u003e\n  )\n}\n```\n\n### Exposed properties on the child function.\n`error` The error object returned by Axios.\n\n`response` The response object returned by Axios.\n\n`isLoading` Boolean flag indicating if Axios is currently making a XHR request.\n\n`makeRequest(props)` Function to invoke another XHR request. This function accepts new temporary props that will be overloaded with the existing props for this request only. This does not include events, events like `onSuccess` set at the component level will not fire. However, they can and will fire if included in the arguments to the `makeRequest` function.\n\n`axios` current instance of axios being used.\n\n\n## Custom Axios Instance\n\nCreate an axios instance\n```js\nconst axiosInstance = axios.create({\n  baseURL: '/api/',\n  timeout: 2000,\n  headers: { 'X-Custom-Header': 'foobar' }\n});\n\n```\n\nPass down through a provider\n```jsx\n\u003cAxiosProvider instance={axiosInstance}\u003e\n  \u003cGet url=\"test\"\u003e\n    {(error, response, isLoading, makeRequest, axios) =\u003e {\n      ...\n    }}\n  \u003c/Get\u003e\n\u003c/AxiosProvider\u003e\n```\n\nOr pass down through props\n```jsx\n\u003cGet url=\"test\" instance={axiosInstance}\u003e\n  {(error, response, isLoading, makeRequest, axios) =\u003e {\n    ...\n  }}\n\u003c/Get\u003e\n```\n\nRetrieve from custom provider (when you need to directly use axios).\nThe default instance will be passed if not inside an `\u003cAxiosProvider/\u003e`.\n```jsx\n\u003cAxiosProvider instance={axiosInstance}\u003e\n  \u003cMyComponent/\u003e\n\u003c/AxiosProvider\u003e\n```\n\n## withAxios(Component) HoC\nIf you need basic access to the axios instance but don't need anything else you can wrap a component using withAxios() higher order component.\n```jsx\nconst MyComponent = withAxios(class MyComponentRaw extends React.Component {\n  componentWillMount() {\n    this.props.axios('test').then(result =\u003e {\n      this.setState({ data: result.data })\n    })\n  }\n  render() {\n    const data = (this.state || {}).data\n    return \u003cdiv\u003e{JSON.stringify(data)}\u003c/div\u003e\n  }\n})\n```\n\n## withAxios(options)(Component) HoC\nIf you want to create your own component with the full react-axios request `options`. You can override the initial options supplied to withAxios at any time by passing `options` prop to your wrapped component. See below on how this works.\n\n```jsx\nconst MyComponent = withAxios({\n    url: '/api/user'\n    params: {id: \"12345\"}\n  })(class MyComponentRaw extends React.Component {\n  render() {\n    const {error, response, isLoading, makeRequest, axios} = this.props\n    if(error) {\n      return (\u003cdiv\u003eSomething bad happened: {error.message}\u003c/div\u003e)\n    } else if(isLoading) {\n      return (\u003cdiv className=\"loader\"\u003e\u003c/div\u003e)\n    } else if(response !== null) {\n      return (\u003cdiv\u003e{response.data.message}\u003c/div\u003e)\n    }\n    return null\n  }\n})\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsheaivey%2Freact-axios","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsheaivey%2Freact-axios","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsheaivey%2Freact-axios/lists"}