@use-hooks/axios
    TypeScript icon, indicating that this package has built-in type declarations

    1.3.1 • Public • Published

    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 (
        <div>
          <h2>
            DEMO of
            <span style={{ color: '#F44336' }}>@use-hooks/axios</span>
          </h2>
          {options.map(item => (
            <div key={item.gender}>
              <input
                type="radio"
                id={item.gender}
                value={item.gender}
                checked={gender === item.gender}
                onChange={e => setGender(e.target.value)}
              />
              {item.title}
            </div>
          ))}
          <button type="button" onClick={reFetch}>
            Refresh
          </button>
          <div>
            {error ? (
              error.message || 'error'
            ) : (
              <textarea
                cols="100"
                rows="30"
                defaultValue={JSON.stringify(data || {}, '', 2)}
              />
            )}
          </div>
        </div>
      );
    }
     

    Live Show

    Development

    Node >= v8 LTS

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

    License

    MIT

    Generated by create-react-hooks.

    Install

    npm i @use-hooks/axios

    DownloadsWeekly Downloads

    586

    Version

    1.3.1

    License

    MIT

    Unpacked Size

    26.3 kB

    Total Files

    5

    Last publish

    Collaborators

    • int64ago