react-hooks-axios

by use-hooks

Custom React Hooks for Axios.js

226 Stars 24 Forks Last release: about 1 year ago (v1.3.1) MIT License 80 Commits 1 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

react-hooks-axios

NPM version npm download Build Status

Custom React Hooks for Axios.js

Install

Note: Make sure that you have installed the correct version of

react(>= v16.8.0)
and
react-dom(>= v16.8.0)
.

npm

npm install --save @use-hooks/axios

yarn

yarn add @use-hooks/axios

API

Params

/**
 * 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

/**
 * 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
 */

Usage

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' ) : ( )}
); }

Live Show

Development

Node >= v8 LTS

  • Clone the project to local disk
  • npm install
  • npm start

License

MIT

Generated by create-react-hooks.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.