# @fabricefrancois/use-api

> React hook to manage API calls.

Latest version **1.0.1** (published 2020-12-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install @fabricefrancois/use-api
pnpm add @fabricefrancois/use-api
yarn add @fabricefrancois/use-api
bun add @fabricefrancois/use-api
```

## 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.0.1 |
| Published | 2020-12-17 |
| First published | 2020-12-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=8 |
| Dependencies | 0 |
| Unpacked size | 24.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Fabricevladimir |
| Maintainers | fabricefrancois |
| Keywords | react hook, hook api, api |

## Links

- npm: https://www.npmjs.com/package/@fabricefrancois/use-api
- Repository: https://github.com/Fabricevladimir/use-api
- Homepage: https://github.com/Fabricevladimir/use-api#readme
- Issues: https://github.com/Fabricevladimir/use-api/issues
- npm.io page: https://npm.io/package/@fabricefrancois/use-api

## Recent versions

- 1.0.1 (latest) — 2020-12-17
- 1.0.0 — 2020-12-17

## README

# use-api

> React hook to manage API calls.

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

## Getting Started

### Prerequisites

This React hook relies on network requests being made using the [axios](https://github.com/axios/axios) library. Other http clients may be used as well as long as `ok` and `data` properties exist on the network response.

### Install

```bash
npm install --save @fabricefrancois/use-api
```

### Usage

```jsx
import axios from axios;
import { useApi } from "@fabrice/use-api";
import React, { useEffect } from "react";

function App() {
  const api = useApi(axios.get, []);

  useEffect(() => {
    api.request('http://jsonplaceholder.typicode.com/users');
  }, []);

  return loading ? (
    <p>Loading users...</p>
  ) : (
    <>
      {api.data.map((user) => (
        <p key={user.id}>{user.name}</p>
      ))}
    </>
  );
}
```

## API

### Params

The `useApi` hook takes in two values

- `apiFunction` - the network request to be made.

  ```javaScript
  function AddTodo(todo) {
    return axios.post("https://todos.com/add/", todo);
  }
  ```

- `initialState` - the state before the request is made. By default, the initial state is an empty object.

### Return Value

An object containing the following is returned from the hook:

- `data` - the data returned from a successful network request (taken from the response's `data` property).
- `error` - boolean value indicating whether the request was completed successfully. Similarly, this value is derived from the `ok` property on the response.
- `loading` - boolean value indicating the status of the network request.
- `request` - asynchronous function that sends the network request and handles the state. Any parameters are forwarded to the function passed into `useApi`. The original response is also returned from the function.

**Example:**

```javaScript
// the returned object can also be destructured to pick out individual properties
const { data, error, loading, request } = useApi(postTodo);

const todo = { title: "New Todo", status: "Not Done" };

// sending the request
const response = await request(todo, { setting1: 1, option2: 2});
```

## License

MIT © [Fabricevladimir](https://github.com/Fabricevladimir)

---

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

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