Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sergey-s/use-axios-react
React axios hooks for CRUD
https://github.com/sergey-s/use-axios-react
axios hooks react-axios react-hooks
Last synced: about 1 month ago
JSON representation
React axios hooks for CRUD
- Host: GitHub
- URL: https://github.com/sergey-s/use-axios-react
- Owner: sergey-s
- Created: 2019-09-03T23:28:01.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T09:05:00.000Z (almost 2 years ago)
- Last Synced: 2024-04-24T15:45:33.329Z (8 months ago)
- Topics: axios, hooks, react-axios, react-hooks
- Language: JavaScript
- Homepage:
- Size: 543 KB
- Stars: 32
- Watchers: 4
- Forks: 9
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- fucking-awesome-react-hooks - `use-axios-react`
- awesome-react-hooks-cn - `use-axios-react`
- awesome-react-hooks - `use-axios-react`
- awesome-react-hooks - `use-axios-react`
README
WARNING: not maintained, feel free to fork and use in any way
npm i axios use-axios-react
## Features
- Hooks for ✅ data fetching ✅ CRUD ✅ Batch operations
- ✅ Request cancellation
- ✅ Retry/reload callbacks
- ✅ Zero-configuration, yet fully configurable when needed
- ✅ No app architecture commitments, drop in into your React and Axios project and start using hooks in your new components
- No extra-dependencies (React and Axios are peer dependencies), thus minimum overhead if your project already uses axios
- All axios features
## Installation
```
npm i use-axios-react
```
Make sure axios itself is installed
```
npm i axios
```
And make sure you use React v16.8.0 or newer.
## Examples
Basic data fetching (GET)
[](https://codesandbox.io/s/fetch-with-reload-retry-hlmb2?fontsize=14)
```js
import React from "react";
import { useGetData } from "use-axios-react";
const KanyeQuote = () => {
const [data, loading] = useGetData("https://api.kanye.rest/");
if (loading) return
Loading...;
return
{data.quote}
;
};
```
Cancellable fetching (GET) with reload and retry
[](https://codesandbox.io/s/fetch-with-reload-retry-ghrd8?fontsize=14)
```js
import React from "react";
import { useGetData } from "use-axios-react";
const KanyeQuote = () => {
const [data, loading, { error, retry }] = useGetData("https://api.kanye.rest/", { cancelable: true });
if (loading) return ;
if (error) return ;
return (
{data.quote}
);
};
```
Basic POST example
[](https://codesandbox.io/s/post-example-8x59c?fontsize=14)
```js
import React from "react";
import { usePostCallback } from "use-axios-react";
function userToRequest({ name, job }) {
return {
url: "https://reqres.in/api/users",
data: { name, job }
};
}
const CreateUser = () => {
const [create, sending, { error, data }] = usePostCallback(userToRequest);
const neo = { name: "Neo", job: "The One" };
const morpheus = { name: "Morpheus", job: "Leader" };
return (
create(neo)}>Neo
create(morpheus)}>Morpheus
);
};
```
Pagination
[](https://codesandbox.io/s/react-pagination-with-axios-hooks-9j5dr?fontsize=14)
```js
import React, { useState } from "react";
import { useGetData } from "use-axios-react";
const PaginatedKanyeQuotes = () => {
const [page, setPage] = useState(1);
const [data, loading] = useGetData(
{ url: "https://api.kanye.rest/", params: { page } },
{ cancelable: true }
);
if (loading) return ;
const prev = () => setPage(page - 1);
const next = () => setPage(page + 1);
return (
{data.quote}
Page {page}
= 9} label="Next →" />
);
};
```
Basic TodoMVC CRUD
[](https://codesandbox.io/s/todomvc-crud-y77vf?fontsize=14)
```js
import React from "react";
import axios from "axios";
import {
provideAxiosInstance,
useGetData,
usePostCallback,
useDeleteCallback,
usePatchCallback
} from "use-axios-react";
provideAxiosInstance(
axios.create({
baseURL: "https://todo-backend-golang-goa.herokuapp.com"
})
);
/**
* Map todos to axios request configs
*/
const todoObjectToAxiosRequest = ({ id, title, order, completed }) => ({
url: id ? `/todos/${id}` : "/todos",
data: { title, order, completed }
});
const TodoMvcApp = () => {
// Reusing the same mapping function for all CRUD requests
const [create, creating, { error: createError }] = usePostCallback(todoObjectToAxiosRequest);
const [remove, removing, { error: removeError }] = useDeleteCallback(todoObjectToAxiosRequest);
const [update, updating, { error: updateError }] = usePatchCallback(todoObjectToAxiosRequest);
// Re-fetch after any of actions is completed
const allRequestsDone = !creating && !removing && !updating;
const [todos = [], fetching, { error: fetchError }] = useGetData("/todos", {
// The hook will re-run every time `depends` changes
depends: [creating, removing, updating],
// Actual request will be performed only if this is true
willRun: allRequestsDone
});
if (createError || removeError || updateError || fetchError) {
return
Error occurred, please reload;
}
return (
);
};
```
Common state GET & POST
[](https://codesandbox.io/s/common-state-get-post-z93n5?fontsize=14)
```js
import React, { useEffect } from "react";
import { useGetData, usePostCallback } from "use-axios-react";
const CreateUser = () => {
// Do an initial load
const [users = [], loading, { error: loadError, setData: setUsers }] = useGetData("https://reqres.in/api/users");
// We're particularly interested in the create() callback and the response data (new user data)
const [create, creating, { error: createError, data: newUser }] = usePostCallback("https://reqres.in/api/users");
// Update users state evey time the newUser changes
useEffect(
() => {
newUser && setUsers([...users, newUser]);
},
[newUser]
);
return (
create({})}>Create dummy user
{(loading || creating) && "Loading..."}
{(loadError || createError) && "Error occurred"}
);
};
```
Using custom axios instance
[](https://codesandbox.io/s/using-custom-axios-instance-vq8bq?fontsize=14)
```js
import React from "react";
import ReactDOM from "react-dom";
import axios from "axios";
import { provideAxiosInstance, useGetData } from "use-axios-react";
const customAxiosInstance = axios.create({
baseURL: "https://reqres.in/api",
transformResponse: axios.defaults.transformResponse.concat(data => {
return data.data;
})
});
provideAxiosInstance(customAxiosInstance);
function App() {
const [users, loading] = useGetData("/users");
if (loading) return "Loading...";
return (
Users:
{JSON.stringify(users)}
);
}
```
### Example apps
- [Full featured TodoMVC app](https://github.com/sergey-s/todomvc-react-hooks-api-crud)
### API Overview
#### Hooks
useGetData()
Use this one if you need to fetch data depending on some state
(e.g. to fetch search results depending on search term)
usePostCallback()
usePutCallback()
usePatchCallback()
useDeleteCallback()
useGetCallback()
Use this if you need to create callbacks to trigger a request programmatically
useParallelPostCallback()
useParallelPutCallback()
useParallelPatchCallback()
useParallelDeleteCallback()
useParallelGetCallback()
Use this if you need to create callbacks to trigger batch requests
#### Settings
provideAxiosInstance()
Provide a custom axios instance to use with the hooks
### API Reference
-------------------
#### `useGetData(url|axiosConfig, options): []`
- `url|axiosConfig` — Refer to [axios request config](https://github.com/axios/axios#request-config) documentation for details
- `options` — The `use{...}Data` hook options:
cancelable: bool
Whether the request should be canceled on component unmount
depends: []
Hook's effect will be re-run only if one of the passed array values changes.
Refer to the React useEffect(effect, depends)
second argument docs to learn how it works.
willRun: bool
Request will be be executed only if this option is true. This is usually an expression such as willRun: !loading
- result array structure is `[data, loading, { error, response, retry, retriesCount, setData }]`:
-------------------
#### `use{Method}Callback(url|axiosConfig|factory, options): []`
Where {Method} is one of the following: `Post, Put, Patch, Delete, Get`
* `url|axiosConfig|factory` — Request URL, axios config object or factory, producing an axios config object from
callback args
- result array structure is `[exec, loading, { error, retry, response, data, execCount, input }]`:
-------------------
#### `useParallel{Method}Callback(axiosConfigFactory): []`
Where {Method} is one of the following: `Post, Put, Patch, Delete, Get`
* `axiosConfigFactory` — A function producing an axios config object from
callback args
- result array structure is `[exec, loading, { retry, errors, responses, data, succeed, failed, execCount, input }]`