# use-axios-get-hook

> Efficient and powerful custom react hook for using Axios get api

Latest version **1.1.0** (published 2020-08-11) · MIT license · 0 weekly downloads

## Install

```sh
npm install use-axios-get-hook
pnpm add use-axios-get-hook
yarn add use-axios-get-hook
bun add use-axios-get-hook
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2020-08-11 |
| First published | 2020-05-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=8 |
| Dependencies | 0 |
| Unpacked size | 44.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Sumit Govil |
| Maintainers | sgovil |

## Links

- npm: https://www.npmjs.com/package/use-axios-get-hook
- Repository: https://github.com/sumgwork/use-axios-get-hook
- Homepage: https://github.com/sumgwork/use-axios-get-hook#readme
- Issues: https://github.com/sumgwork/use-axios-get-hook/issues
- npm.io page: https://npm.io/package/use-axios-get-hook

## Recent versions

- 1.1.0 (latest) — 2020-08-11
- 1.0.0 — 2020-05-19
- 0.0.2 — 2020-05-19
- 0.0.1 — 2020-05-19

## README

# use-axios-get-hook

> React custom hook for using Axios fetch call

[![NPM](https://img.shields.io/npm/v/use-axios-get-hook)](https://www.npmjs.com/package/use-axios-get-hook)
[![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

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

## Usage

### Standard

```jsx
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

```jsx
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](https://github.com/sumgwork)

---

This hook is created using [create-react-hook](https://github.com/hermanya/create-react-hook).

---
_Source: https://npm.io/package/use-axios-get-hook · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._