react-axios
2.0.6 • Public • Published
react-axios
Axios Component for React with child function callback.This is intended to allow in render async requests.
Features
- Same great features found inAxios
- 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 andisReady state.
- Callback props foronSuccess,onError, andonLoading
- Supports custom axios instances throughprops or a<AxiosProvider ... >
- Create your own request components wrapped using thewithAxios({options})(ComponentToBeWrapped) HoC
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
<Requestinstance={axios.create({})}/* custom instance of axios - optional */method=""/* get, delete, head, post, put 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 aGET request
// Post a request for a user with a given IDrender(){return(<div><Geturl="/api/user"params={{id:"12345"}}>{(error,response,isLoading,makeRequest,axios)=>{if(error){return(<div>Something bad happened:{error.message}<buttononClick={()=>makeRequest({params:{reload:true}})}>Retry</button></div>)}elseif(isLoading){return(<div>Loading...</div>)}elseif(response!==null){return(<div>{response.data.message}<buttononClick={()=>makeRequest({params:{refresh:true}})}>Refresh</button></div>)}return(<div>Default message before request is made.</div>)}}</Get></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.
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.
axios current instance of axios being used.
Custom Axios Instance
Create an axios instance
constaxiosInstance=axios.create({baseURL:'/api/',timeout:2000,headers:{'X-Custom-Header':'foobar'}});
Pass down through a provider
<AxiosProviderinstance={axiosInstance}><Geturl="test">{(error,response,isLoading,makeRequest,axios)=>{ ...}}</Get></AxiosProvider>
Or pass down through props
<Geturl="test"instance={axiosInstance}>{(error,response,isLoading,makeRequest,axios)=>{ ...}}</Get>
Retrieve from custom provider (when you need to directly use axios).The default instance will be passed if not inside an<AxiosProvider/>.
<AxiosProviderinstance={axiosInstance}><MyComponent/></AxiosProvider>
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.
constMyComponent=withAxios(classMyComponentRawextendsReact.Component{componentWillMount(){this.props.axios('test').then(result=>{this.setState({data:result.data})})}render(){constdata=(this.state||{}).datareturn<div>{JSON.stringify(data)}</div>}})
withAxios(options)(Component) HoC
If you want to create your own component with the full react-axios requestoptions. You can override the initial options supplied to withAxios at any time by passingoptions prop to your wrapped component. See below on how this works.
constMyComponent=withAxios({url:'/api/user'params:{id:"12345"}})(classMyComponentRawextendsReact.Component{render(){const{error, response, isLoading, makeRequest, axios}=this.propsif(error){return(<div>Something bad happened:{error.message}</div>)}elseif(isLoading){return(<divclassName="loader"></div>)}elseif(response!==null){return(<div>{response.data.message}</div>)}returnnull}})
Package Sidebar
Install
npm i react-axios
Repository
Homepage
Weekly Downloads
6,873
Version
2.0.6
License
MIT
Unpacked Size
90 kB
Total Files
17