# react-use-ajax

> React hook for generic ajax calls

Latest version **1.0.0** (published 2021-02-25) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-use-ajax
pnpm add react-use-ajax
yarn add react-use-ajax
bun add react-use-ajax
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2021-02-25 |
| First published | 2021-02-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 20.8 KB |
| Known vulnerabilities | 0 (+23 in 1 direct dependencies) |
| Install scripts | no |
| Author | Hugo Morgan |
| Maintainers | hmorgan |
| Keywords | hooks, react |

## Links

- npm: https://www.npmjs.com/package/react-use-ajax
- Homepage: https://github.com/HPJM/react-use-ajax
- npm.io page: https://npm.io/package/react-use-ajax

## Dependencies (1)

- [axios](https://npm.io/package/axios.md) ^0.21.1

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.0 (latest) — 2021-02-25

## README

# `useAjax`

This is a hook to make Ajax requests, which helps reduce boilerplate in your code. The actual fetch is done via [`axios`](https://github.com/axios/axios).

## Usage

The hook is configured with an options object. This is an extension of the default `axios` request config with some optional success / error handlers. See the reference below.

The hook returns a tuple comprising a function, and an object with some useful properties. The function makes the actual request, and takes an optional `override` argument. The argument can be an object, which is merged in with the initial config, or a function, which is passed the initial config as an argument. The return value of the override function is by default merged in with the initial config. If you do not wish either form to be merged with the initial config, pass `false` as the second argument to the function.

```jsx
const YourComponent = () => {
  const [list, { calls, loading, data: things }] = useAjax({
    url: "localhost:3000/api/something",
    initial: [],
  });

  const [doSomeUpdate, { loading: updateLoading, data: updated }] = useAjax({
    url: "localhost:3000/api/something/1",
    method: "PATCH",
    data: [1, 2, 3],
  });

  return (
    <div>
      <button onClick={() => list()}>Fetch!</button>
      <button onClick={() => doSomeUpdate({ data: [3, 6, 9] })}>
        Update something
      </button>
      <p>{things.join(", ")}</p>
      <p>Last updated thing: {updated}</p>
      {updateLoading && <p>Updating...</p>}
      {loading && <p>Loading...</p>}
      <p>
        Called {calls} {calls === 1 ? "time" : "times"}
      </p>
    </div>
  );
};
```

## Reference

```js
const options = {
  onSuccess: (resp) => console.log("success:", resp.data),
  onError: (resp) => console.log("error:", resp),
  data: { key: "value" }
  initial: []
}
```

- `onSuccess?: () => void | string` - optional callback invoked when response made successfully; if it has a return value, then that will be the success message (takes precedence over `successMessage`)
- `onError?: () => void | string` - optional callback invoked when response errors; if it has a return value, that will be used as the error message (takes precedence over `errorMessage`)
- `initial?: T` - this defaults to `null` but useful for setting an initial value before the first fetch is done
- `fetchImmediately?: boolean` - this fetches on render, defaults to false
- `errorMessage?: string` - message to show when request fails
- `successMessage?: string` - message to show when request succeeds
- `errorTimeout?: string` - Times out error states
- `successTimeout?: string` - Times out success states

```js
const [handler, { calls, successCalls, errorCalls, loading, data }] = useAjax(
  options
);
```

- `handler(overrideObjectOrFunc, merge: boolean): void` - invoke this to make a request;
- `calls: number` - count of requests;
- `successCalls: number` - count of successful requests;
- `errorCalls: number` - count of failed requests;
- `loading: boolean` - whether response is being waited for;
- `fetched: boolean` - whether request has been made at all;
- `success: boolean` - whether last request succeeded;
- `error: boolean` - whether last request failed;
- `successMessage: string` - success message generated by `onSuccess` or `successMessage` prop after a successful request;
- `errorMessage: string` - error message generated by `onError` or `errorMessage` prop after a failed request;
- `data: void` - the data from the response;
- `clearSuccessCalls: () => void` - clear success calls;
- `clearErrorCalls: () => void` - clear error calls;
- `clearCalls: () => void` - clear calls;
- `clearError: () => void` - clears error states;
- `clearSuccess: () => void` - clears success states;

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