Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sheaivey/react-axios
Axios Components for React with child function callback
https://github.com/sheaivey/react-axios
api async-component axios axios-instance axiosprovider component prop-types react react-axios
Last synced: 7 days ago
JSON representation
Axios Components for React with child function callback
- Host: GitHub
- URL: https://github.com/sheaivey/react-axios
- Owner: sheaivey
- License: mit
- Created: 2016-12-05T03:39:30.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2023-03-01T04:44:09.000Z (over 1 year ago)
- Last Synced: 2024-10-11T13:40:23.096Z (28 days ago)
- Topics: api, async-component, axios, axios-instance, axiosprovider, component, prop-types, react, react-axios
- Language: JavaScript
- Homepage:
- Size: 1.16 MB
- Stars: 180
- Watchers: 4
- Forks: 20
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://www.npmjs.com/package/react-axios)
[](https://travis-ci.org/sheaivey/react-axios)
[](https://github.com/sheaivey/react-axios/blob/master/LICENSE)
[](https://www.npmjs.com/package/react-axios)
# react-axios
Axios Component for React with child function callback.
This is intended to allow in render async requests.
## Features
- Same great features found in [Axios](https://github.com/mzabriskie/axios)
- Component driven
- Child function callback ***(error, response, isLoading, makeRequest, axios) => { }***
- Auto cancel previous requests
- Debounce to prevent rapid calls.
- Request only invoked on prop change and *isReady* state.
- Callback props for ***onSuccess***, ***onError***, and ***onLoading***
- Supports custom axios instances through ***props*** or a ***<AxiosProvider ... >***
- Create your own request components wrapped using the ***withAxios({options})(ComponentToBeWrapped)*** HoC
## Installing
Using npm:
```bash
$ npm install react-axios
```
Also install the required peer dependancies if you have not already done so:
```bash
$ npm install axios
$ npm install react
$ npm install prop-types
```
## Components & Properties
#### Base Request Component
```jsx
{}} /* called on success of axios request - optional */
onLoading={()=>{}} /* called on start of axios request - optional */
onError=(error)=>{} /* called on error of axios request - optional */
/>
```
#### Helper Components
```jsx
```
## Example
Include in your file
```js
import { AxiosProvider, Request, Get, Delete, Head, Post, Put, Patch, withAxios } from 'react-axios'
```
Performing a `GET` request
```js
// Post a request for a user with a given ID
render() {
return (
{(error, response, isLoading, makeRequest, axios) => {
if(error) {
return (Something bad happened: {error.message} makeRequest({ params: { reload: true } })}>Retry)
}
else if(isLoading) {
return (Loading...)
}
else if(response !== null) {
return ({response.data.message} makeRequest({ params: { refresh: true } })}>Refresh)
}
return (Default message before request is made.)
}}
)
}
```
### Exposed properties on the child function.
`error` The error object returned by Axios.
`response` The response object returned by Axios.
`isLoading` Boolean flag indicating if Axios is currently making a XHR request.
`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.
`axios` current instance of axios being used.
## Custom Axios Instance
Create an axios instance
```js
const axiosInstance = axios.create({
baseURL: '/api/',
timeout: 2000,
headers: { 'X-Custom-Header': 'foobar' }
});
```
Pass down through a provider
```jsx
{(error, response, isLoading, makeRequest, axios) => {
...
}}
```
Or pass down through props
```jsx
{(error, response, isLoading, makeRequest, axios) => {
...
}}
```
Retrieve from custom provider (when you need to directly use axios).
The default instance will be passed if not inside an ``.
```jsx
```
## withAxios(Component) HoC
If you need basic access to the axios instance but don't need anything else you can wrap a component using withAxios() higher order component.
```jsx
const MyComponent = withAxios(class MyComponentRaw extends React.Component {
componentWillMount() {
this.props.axios('test').then(result => {
this.setState({ data: result.data })
})
}
render() {
const data = (this.state || {}).data
return
{JSON.stringify(data)}
}
})
```
## withAxios(options)(Component) HoC
If 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.
```jsx
const MyComponent = withAxios({
url: '/api/user'
params: {id: "12345"}
})(class MyComponentRaw extends React.Component {
render() {
const {error, response, isLoading, makeRequest, axios} = this.props
if(error) {
return (
Something bad happened: {error.message})
} else if(isLoading) {
return ()
} else if(response !== null) {
return ({response.data.message})
}
return null
}
})
```