Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

react-axios

2.0.0 • Public • Published

npm Build Status npm npm

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
  • Component driven
  • Child function callback (error, response, isLoading) => { }
  • 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 ... >

Installing

Using npm:

$ npm install react-axios

Also install the required peer dependancies if you have not already done so:

$ npm install axios
$ npm install react
$ npm install prop-types

Components & Properties

Base Request Component

<Request
  instance={axios.create({})} /* custom instance of axios - optional */
  method="" /* getdeleteheadpostput and patch - required */
  url="" /*  url endpoint to be requested - required */
  data={} /* post data - optional */
  params={} /* queryString data - optional */
  config={} /* axios config - optional */
  debounce={200} /* minimum time between requests events - optional */
  debounceImmediate={true} /* make the request on the beginning or trailing end of debounce - optional */
  isReady={true} /* can make the axios request - optional */
  onSuccess={(response)=>{}} /* 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

<Get ... />
<Delete ... />
<Head ... />
<Post ... />
<Put ... />
<Patch ... />

Example

Include in your file

import { AxiosProvider, Request, Get, Delete, Head, Post, Put, Patch, withAxios } from 'react-axios'

Performing a GET request

// Post a request for a user with a given ID
render() {
  return (
    <div>
      <Post url="/api/user" data={{id: "12345"}}>
        {(error, response, isLoading, onReload) => {
          if(error) {
            return (<div>Something bad happened: {error.message} <button onClick={() => onReload({ params: { reload: true } })}>Retry</button></div>)
          }
          else if(isLoading) {
            return (<div>Loading...</div>)
          }
          else if(response !== null) {
            return (<div>{response.data.message} <button onClick={() => onReload({ params: { refresh: true } })}>Refresh</button></div>)
          }
          return (<div>Default message before request is made.</div>)
        }}
      </Post>
    </div>
  )
}

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.

onReload(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.

Custom Axios Instance

Create an axios instance

const axiosInstance = axios.create({
  baseURL: '/api/',
  timeout: 2000,
  headers: { 'X-Custom-Header': 'foobar' }
});
 

Pass down through a provider

<AxiosProvider instance={axiosInstance}>
  <Get url="test">
    {(error, response, isLoading) => {
      ...
    }}
  </Get>
</AxiosProvider>

Or pass down through props

<Get url="test" instance={axiosInstance}>
  {(error, response, isLoading) => {
    ...
  }}
</Get>

Retrieve from custom provider (when you need to directly use axios). The default instance will be passed if not inside an <AxiosProvider/>.

const MyComponent = withAxios(class MyComponentImpl extends React.Component {
  componentWillMount() {
    this.props.axios('test').then(result => {
      this.setState({ data: result.data })
    })
  }
  render() {
    const data = (this.state || {}).data
    return <div>{JSON.stringify(data)}</div>
  }
})
 
<AxiosProvider instance={axiosInstance}>
  <MyComponent/>
</AxiosProvider>

install

npm i react-axios

Downloadsweekly downloads

988

version

2.0.0

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar