https://github.com/saisandeepvaddi/use-api-call
React hook to make api calls.
https://github.com/saisandeepvaddi/use-api-call
ajax-call api hooks react
Last synced: 2 months ago
JSON representation
React hook to make api calls.
- Host: GitHub
- URL: https://github.com/saisandeepvaddi/use-api-call
- Owner: saisandeepvaddi
- License: mit
- Created: 2020-02-18T00:51:42.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-05T07:34:50.000Z (almost 3 years ago)
- Last Synced: 2025-08-09T18:30:16.666Z (2 months ago)
- Topics: ajax-call, api, hooks, react
- Language: TypeScript
- Size: 947 KB
- Stars: 1
- Watchers: 1
- Forks: 1
- Open Issues: 21
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# use-api-call
Minimal react hook to make api calls.
## Installation
> npm install use-api-call
>
> yarn add use-api-call
## Usage
```jsx
// See examples on adavanced usage.
import React from "react";
import { useApiCall } from "use-api-call";
function App() {
const { data, error, loading, invoke } = useApiCall(
"https://api.github.com/users"
);
React.useEffect(() => {
invoke(); // You don't have to call invoke() if you pass option {invokeOnMount: true} to useApiCall()'s second argument. But, isn't it nice to have control when you trigger ajax call.
}, []);
if (loading) return
Loading...
;
return
{data};
}
```
## API
- **useApiCall(request, [,options])**
- `request` - Function | URL string - Any function that returns `Promise` with data (or) A api url that returns JSON (uses fetch by default). (See the examples section).
- Example: `useApiCall(() => axios("/request/url/here").then(res => res.data))`
- `options` - Object - Options object.
- returns an object with {data, error, loading, invoke} values. See the [Returns](#Returns) section for details.
### Options
- updateOnlyIfMounted
- Will update the data, error, loading values only if component is still mounted. Prevents "Can't perform a React state update on an unmounted component" warning.
- Type: _Boolean_
- **Default**: `true`
- invokeOnMount
- Runs ajax request when the component is mounted automatically. Basically, it does `useEffect(() => { invoke(); }, [])`.
- Type: _Boolean_
- **Default**: `false`
### Returns
- data
- Whatever is returned by your ajax call on success.
- Type: _any_
- **Default**: `undefined`
- loading
- A loader indicating whether request is running. You don't have to change anything here.
- Type: _Boolean_
- error
- Error thrown by the request unmodified. i.e., Axios and fetch return different _Error_ object structure, you'll have to check their documentation.
- Type: _Error_
- **Default**: `undefined`
- invoke
- A function which you'll call to run the ajax call. Invoke can take options that you normally send with your fetch or axios call. If you have passed your own function instead of passing URL string, You have to allow your function to take arguments. Please check the examples section to see how.
- Type: _Function_
## Examples
Check [test/index.test.tsx](test/index.test.tsx) for all different examples. I'll update some React examples soon.
```jsx
// Manual invoke
const App = () => {
const { data, error, invoke, loading } = useApiCall(() =>
fetch("https://api.github.com/users").then((res: any) => res.json())
);
if (loading) {
return
Loading...;
}
return (
invoke()}>Click
{JSON.stringify(data, null, 2)}
);
};
```
```jsx
// Auto invoke on mount
const App = () => {
const { data, error, invoke, loading } = useApiCall(
() => fetch("https://api.github.com/users").then((res: any) => res.json()),
{
invokeOnMount: true,
}
);
if (loading) {
return
Loading...;
}
return (
{JSON.stringify(data, null, 2)}
);
};
```
```jsx
// Without ajax library. Uses fetch by default. You might have to polyfill for wide browser support.
const App = () => {
const { data, error, invoke, loading } = useApiCall(
"https://api.github.com/users",
{
invokeOnMount: true,
}
);
if (loading) {
return
Loading...;
}
return (
{JSON.stringify(data, null, 2)}
);
};
```
```jsx
// Pass arguments to axios.
const App = () => {
const { data, error, invoke, loading } = useApiCall(
(...args) => axios.get("https://api.github.com/users", ...args).then(res => res.data)
);
if (loading) {
return
Loading...;
}
return (
invoke({headers: {Authorization: "Bearer 12345xcxcxc"}})}>Get Users
{JSON.stringify(data, null, 2)}
);
};
```