use-hooks / React Hooks Axios
Licence: mit
Custom React Hooks for Axios.js
Stars: ✭ 245
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to React Hooks Axios
Axios Mock Adapter
Axios adapter that allows to easily mock requests
Stars: ✭ 2,832 (+1055.92%)
Mutual labels: axios
Nuxt Juejin Project
仿掘金web网站,使用服务端渲染。主要技术:nuxt + koa + vuex + axios + element-ui 。
Stars: ✭ 209 (-14.69%)
Mutual labels: axios
Neteasecloudwebapp
This is a vue for NeteaseCloud projects!
Stars: ✭ 2,456 (+902.45%)
Mutual labels: axios
React Cnodejs.org
Material UI version of cnodejs.org, the biggest Node.js Chinese community.
Stars: ✭ 242 (-1.22%)
Mutual labels: axios
Toucan
Boilerplate template using Vue.js, TypeScript and .NET Core 2.1, based on SOLID design principles
Stars: ✭ 215 (-12.24%)
Mutual labels: axios
Blog Frontend Project
Web frontend code for my blogs, develop with Vue.
Stars: ✭ 206 (-15.92%)
Mutual labels: axios
Filmsys
一个使用Vue全家桶和后台Express框架结合Mysql数据库搭建起来的移动端电影售票和管理系统,实现了热映、即将上映、电影和影院全局搜索、评论、选座、购票、点赞、收藏、订单等一系列购票和管理流程功能
Stars: ✭ 217 (-11.43%)
Mutual labels: axios
Login
Vue + Vue-router + Vuex 实现前端页面及逻辑,Express 实现注册登录登出的RestFul API 。
Stars: ✭ 246 (+0.41%)
Mutual labels: axios
Vue Questionnaire
使用 Vue + CI 开发的简易问卷调查系统,演示账户:admin / admin
Stars: ✭ 220 (-10.2%)
Mutual labels: axios
react-hooks-axios
Custom React Hooks for Axios.js
Install
Note: Make sure that you have installed the correct version of
react(>= v16.8.0)
andreact-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>
);
}
Development
Node >= v8 LTS
- Clone the project to local disk
npm install
npm start
License
MIT
Generated by create-react-hooks.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].