Coded Geekery

BlogAboutContact
BlogAboutContact

useAxios

React hook for axios

useAxios
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]);

    Coded Geekery

    © 2021 Roger Stringer. All rights reserved.

    TwitterGitHubInstagram

    Stuff

    HomeAbout MeContact Me

    Not Playing

    Spotify