Custom React Hooks for Axios.js
Custom React Hooks for Axios.js
Note: Make sure that you have installed the correct version of
react(>= v16.8.0)andreact-dom(>= v16.8.0).
npm install --save @use-hooks/axios
yarn add @use-hooks/axios
/** * Params * @param {AxiosInstance} axios - (optional) The custom axios instance * @param {string} url - The request URL * @param {('GET'|'POST'|'PUT'|'DELETE'|'HEAD'|'OPTIONS'|'PATCH')} method - The request method * @param {object} [options={}] - (optional) The config options of Axios.js (https://goo.gl/UPLqaK) * @param {object|string} trigger - (optional) The conditions for AUTO RUN, refer the concepts of [conditions](https://reactjs.org/docs/hooks-reference.html#conditionally-firing-an-effect) of useEffect, but ONLY support string and plain object. If the value is a constant, it'll trigger ONLY once at the begining * @param {function} [forceDispatchEffect=() => true] - (optional) Trigger filter function, only AUTO RUN when get `true`, leave it unset unless you don't want AUTU RUN by all updates of trigger * @param {function} [customHandler=(error, response) => {}] - (optional) Custom handler callback, NOTE: `error` and `response` will be set to `null` before request */
/** * Returns * @param {object} response - The response of Axios.js (https://goo.gl/dJ6QcV) * @param {object} error - HTTP error * @param {boolean} loading - The loading status * @param {function} reFetch - MANUAL RUN trigger function for making a request manually */
import React, { useState } from 'react';import useAxios from '@use-hooks/axios';
export default function App() { const [gender, setGender] = useState(''); const { response, loading, error, reFetch } = useAxios({ url:
https://randomuser.me/api/${gender === 'unknown' ? 'unknown' : ''}
, method: 'GET', options: { params: { gender }, }, trigger: gender, // or // trigger: { gender } forceDispatchEffect: () => !!gender, // AUTO RUN only if gender is set });const { data } = response || {};
const options = [ { gender: 'female', title: 'Female' }, { gender: 'male', title: 'Male' }, { gender: 'unknown', title: 'Unknown' }, ];
if (loading) return 'loading...'; return (
); }DEMO of @use-hooks/axios
{options.map(item => (setGender(e.target.value)} /> {item.title}))} Refresh{error ? ( error.message || 'error' ) : ( )}
Node >= v8 LTS
npm install
npm start
MIT
Generated by create-react-hooks.