Use-axios-get-hook NPM

use-axios-get-hook

React custom hook for using Axios fetch call

Install

npm install --save axios use-axios-get-hook

Usage

Standard

import React from "react";
import useAxiosGet from "use-axios-get-hook";

export default function App() {
  const [response, error, loading] = useAxiosGet(
    "https://jsonplaceholder.typicode.com/todos"
  );
  return (
    <div>
      <h1>Use Axios Get Hook</h1>

      {loading && <div>Loading...</div>}
      {!loading && error && <div>{error.message}</div>}
      {!loading && !error && response && (
        <div>
          <h2>Fetch Complete</h2>
          <pre>{JSON.stringify(response, undefined, 2)}</pre>
        </div>
      )}
    </div>
  );
}

With Options

import React, { useState } from "react";
import useAxiosGet from "use-axios-get-hook";
import axios from "axios";

// To showcase the concept of handler in the example
const httpService = {
  get: axios.get,
  post: axios.post,
};

const commonStyle = {
  marginBottom: 8,
};

export default function App() {
  const [refetchCount, setRefetchCount] = useState(0);
  const [response, error, loading] = useAxiosGet(
    "https://jsonplaceholder.typicode.com/todos",
    {
      config: {
        method: "GET",
        headers: {
          header1: "abc",
        },
      },
      dependencyParams: [refetchCount],
      fetchLatency: 100,
      handler: httpService,
    }
  );
  return (
    <div>
      <h1>Use Axios Get Hook</h1>
      <button
        onClick={() => {
          setRefetchCount((prevState) => prevState + 1);
        }}
        style={commonStyle}
      >
        Refetch
      </button>
      {refetchCount > 0 && (
        <div style={commonStyle}>Refetched {refetchCount} times</div>
      )}
      {loading && <div>Loading...</div>}
      {!loading && error && <div>{error.message}</div>}
      {!loading && !error && response && (
        <div>
          <h2>Fetch Complete</h2>
          <pre>{JSON.stringify(response, undefined, 2)}</pre>
        </div>
      )}
    </div>
  );
}

API Options

option	description	default	example
config	Configuration for API call like method, data, headers etc.	{}	{ config: { headers: { headers1: "abc" } } }
dependencyParams	Array of parameters which cause the API call to happen again	[]	{ dependencyParams: count }
abortCondition	A boolean expression which when false terminates the API call	false	{ abortCondition: x < 1 }
processor	A function which can execute on response data before returning the result. Should mandatorily return a value.	(value) => value	{ processor: response => response.map(row => row.count) }
outputData	If for any reason you want the API call not to happen but the hook to still return specific data, pass that data with this outputData param and the hook will behave as if the response is coming as result of API call.	undefined	{ outputData: data }
fetchLatency	Initial delay (in milliseconds) for the fetch to remove flicker from the UI. Loading will be set to true during this initial delay.	0	{ fetchLatency: 200 }
handler	The axios handler if default handler is not to be used. Useful when intercepting requests or responses.	axios	{ handler: httpService }
shouldHandleNextUrl	This is a special case where a request results in a count, next, results structure. If enabled, the hook will fetch all pages and combine the results.	false	{ shouldHandleNextUrl: true }

License

MIT © sumgwork

This hook is created using create-react-hook.

@everything-registry/sub-chunk-3025 @infinitebrahmanuniverse/nolb-use-a

4 years ago

4 years ago

4 years ago

4 years ago