https://github.com/use-hooks/react-hooks-axios

Custom React Hooks for Axios.js
https://github.com/use-hooks/react-hooks-axios

axios react-hooks reactjs

Last synced: about 2 months ago
JSON representation

Custom React Hooks for Axios.js

• Host: GitHub
• URL: https://github.com/use-hooks/react-hooks-axios
• Owner: use-hooks
• License: mit
• Created: 2018-12-10T06:25:54.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2022-12-09T18:58:17.000Z (about 2 years ago)
• Last Synced: 2024-10-29T21:05:43.922Z (2 months ago)
• Topics: axios, react-hooks, reactjs
• Language: JavaScript
• Size: 671 KB
• Stars: 264
• Watchers: 4
• Forks: 24
• Open Issues: 26
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

• awesome-react-hooks - react-hooks-axios - Custom React Hooks for Axios.js (Packages)

README

        
# react-hooks-axios

[![NPM version][npm-image]][npm-url]

[![npm download][download-image]][download-url]

[![Build Status][travis-image]][travis-url]

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

```bash

npm install --save @use-hooks/axios

```

### yarn

```bash

yarn add @use-hooks/axios

```

## API

### Params

```js

/**

 * 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

```js

/**

 * 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

```js

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](https://use-hooks.github.io/react-hooks-axios/)

## Development

> Node >= v8 LTS

 - Clone the project to local disk

 - `npm install`

 - `npm start`

## License

MIT

> Generated by [create-react-hooks](https://github.com/use-hooks/create-react-hooks).

 [npm-image]: https://img.shields.io/npm/v/@use-hooks/axios.svg?style=flat-square

 [npm-url]: https://npmjs.org/package/@use-hooks/axios

 [download-image]: https://img.shields.io/npm/dm/@use-hooks/axios.svg?style=flat-square

 [download-url]: https://npmjs.org/package/@use-hooks/axios

 [travis-url]: https://travis-ci.org/use-hooks/react-hooks-axios

 [travis-image]: https://img.shields.io/travis/use-hooks/react-hooks-axios.svg?style=flat-square