useAxios
React hook for axios
import { useState, useEffect } from 'react'; import axios from 'axios'; axios.defaults.baseURL = 'https://jsonplaceholder.typicode.com'; const useAxios = ({ url, method, body = null, headers = null }) => { const [response, setResponse] = useState(null); const [error, setError] = useState(''); const [loading, setloading] = useState(true); const fetchData = () => { axios[method](url, JSON.parse(headers), JSON.parse(body)) .then((res) => { setResponse(res.data); }) .catch((err) => { setError(err); }) .finally(() => { setloading(false); }); }; useEffect(() => { fetchData(); }, [method, url, body, headers]); return { response, error, loading }; }; export default useAxios;
Why?#
Axios calls can get repetitive so a hook to handle it can be handy.
Usage#
Basic Usage
const { response, loading, error } = useAxios({ method: 'post', url: '/posts', headers: JSON.stringify({ accept: '*/*' }), body: JSON.stringify({ userId: 1, id: 19392, title: 'title', body: 'Sample text', }), }); const [data, setData] = useState([]); useEffect(() => { if (response !== null) { setData(response); } }, [response]);