@react-daily-hooks/use-axios

React Hook to fetch using axios.

Usage no npm install needed!

<script type="module">
  import reactDailyHooksUseAxios from 'https://cdn.skypack.dev/@react-daily-hooks/use-axios';
</script>

README

useAxios

React Hook to fetch using axios.

Install

npm i @react-daily-hooks/use-axios

Basic Usage

Live Demo(Code Sandbox)

import React, { useState } from "react";
import useAxios from "@react-daily-hooks/use-axios";

const App = () => {
  const [fetchTrigger, setFetchTrigger] = useState(false);
  const { loading, error, data } = useAxios(
    {
      url: "http://ddragon.leagueoflegends.com/api/versions.json"
    },
    fetchTrigger
  );

  const refetch = () => {
    setFetchTrigger(true);
  };

  return (
    <div>
      <h1>UseAxios</h1>
      <h2>{loading && "Loading..."}</h2>
      <h2>{error && `error : ${error}`}</h2>
      <h2>{!loading && !error && data && `status : ${data.status}`}</h2>
      <button onClick={refetch}>refetch</button>
    </div>
  );
};

Parameters

Parameter Type Description Required Default Value
url string API URL yes undefined
autoFetch boolean Fetch trigger, If you want to not fetch automatically set value to false no true

Return value

value Type Description
loading boolean Loading state
error boolean Error
data boolean Data from axios