https://github.com/nicklima/axios-hook-library
Custom React Hook
https://github.com/nicklima/axios-hook-library
axios axios-hook-library component hook library npm-package react typescript
Last synced: 6 days ago
JSON representation
Custom React Hook
- Host: GitHub
- URL: https://github.com/nicklima/axios-hook-library
- Owner: nicklima
- License: mit
- Created: 2021-03-29T11:43:58.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2026-05-19T01:15:04.000Z (3 months ago)
- Last Synced: 2026-05-19T03:10:19.150Z (3 months ago)
- Topics: axios, axios-hook-library, component, hook, library, npm-package, react, typescript
- Language: TypeScript
- Homepage: https://nicklima.github.io/axios-hook-library
- Size: 5.93 MB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: .github/README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# Axios Hook Library
[](https://www.npmjs.com/package/axios-hook-library)
[](https://nicklima.github.io/axios-hook-library/)
[](https://github.com/nicklima/axios-hook-library/)
[](https://github.com/nicklima/axios-hook-library/issues)
[](https://standardjs.com)
[](https://github.com/nicklima/axios-hook-library)
[](https://standardjs.com)
[](https://gitmoji.dev)
## Table of contents
- [About](#about)
- [Playground](#playground)
- [Technologies](#technologies)
- [Dependencies](#dependencies)
- [Installation](#installation)
- [Usage & Examples](#usage--examples)
- [POST](#POST)
- [GET](#GET)
- [PATCH/PUT](#PATCH/PUT)
- [DELETE](#DELETE)
- [TODO](#todo)
- [License](#license)
## About
This project was developed to help our team to minimize the code in our projects.
## Playground
[Click here](https://nicklima.github.io/axios-hook-library/) to view the project demo and made some tests requests.
## Technologies
- [React](https://pt-br.reactjs.org/)
- [TypeScript](https://www.typescriptlang.org)
## Dependencies
- [Node](https://nodejs.org/en/download/)
- [Create React Lib](https://www.npmjs.com/package/create-react-library)
- [MicroBundle CRL](https://www.npmjs.com/package/microbundle-crl)
- [Axios](https://www.npmjs.com/package/axios)
- [Pretier](https://prettier.io/)
- [Eslint](https://eslint.org/)
- [Jest](https://jestjs.io/pt-BR/)
- [CrossEnv](https://www.npmjs.com/package/cross-env)
## Installation
To run the code on your machine, follow the steps below.
```bash
git clone git@github.com:nicklima/axios-hook-library.git
```
After cloning the project, we need to install all the dependencies.
```bash
# npm
npm install
# yarn
yarn install
```
Local development is broken into two parts (ideally using two tabs).
First, run rollup to watch your src/ module and automatically recompile it into dist/ whenever you make changes.
```bash
# runs rollup with watch flag
# npm
npm start
# yarn
yarn start
```
The second part will be running the example/ create-react-app that's linked to the local version of your module.
We have to prepare the test environment to view the package that is being executed. Open another terminal window and run the following commands:
```bash
# (in another tab)
# this command will chage to example directory and install modules
#npm
npm run example
#yarn
yarn run example
```
And finally we can run the project and test.
```bash
# (on the same tab as the previous command)
# runs create-react-app dev server
#npm
npm run preview
#yarn
yarn run preview
```
Now, anytime you make a change to your library in src/ or to the example app's example/src, create-react-app will live-reload your local dev server so you can iterate on your component in real-time.
## Usage & Examples
Here are some examples of how to use Axios Hook Library.
First we will need to install the package
```bash
# npm
npm install axios-hook-library
# yarn
yarn add axios-hook-library
```
### Usage
Once installed just import it into your JSX file as in the example below
```tsx
import React from 'react'
import useAxiosHook from 'axios-hook-library'
import logo from './logo.svg'
import './App.css'
const App = () => {
const { isLoading, isSuccess, hasError, rspData, fetchData } = useAxiosHook()
return (
)
}
export default App
```
In the code below we have some useful information on how to use the library
```tsx
//If you want to reset the isSuccess state, pass a time parameter on the hook call.
//Ex: useAxiosHook(3000)
const { isLoading, isSuccess, hasError, rspData, fetchData } = useAxiosHook()
//Function fetchData
//Params: baseURL, method ("GET" | "POST" | "PUT" | "PATCH" | "DELETE"), data
fetchData('https://jsonplaceholder.typicode.com/posts', 'GET')
//React States
//isLoading(boolean), isSuccess(boolean), hasError(boolean), rspData(object)
isLoading &&
Loading
isSuccess && Sent
hasError && Error
rspData && {JSON.stringify(rspData, null, 2)}
```
### Examples
Check below how to make requests with the Axios Hook Library
#### POST
```tsx
import React from 'react'
import useAxiosHook from 'axios-hook-library'
import logo from './logo.svg'
import './App.css'
const App = () => {
const { isLoading, isSuccess, hasError, fetchData } = useAxiosHook()
const formData = {
title: 'Axios Hook Library',
body: 'Lorem ipsum dolor sit amet consectetur adipisicing elit.',
userId: 1,
}
return (
fetchData(
'https://jsonplaceholder.typicode.com/posts',
'POST',
formData
)
}
>
Send Request
{isLoading && Sending Data...
}
{hasError && Some error occurred, try again.
}
{isSuccess && Data Sent!
}
)
}
export default App
```
#### GET
```tsx
import React from 'react'
import useAxiosHook from 'axios-hook-library'
import logo from './logo.svg'
import './App.css'
const App = () => {
const { isLoading, hasError, rspData, fetchData } = useAxiosHook()
//Function to check if the object is empty
const checkData = () => {
if (Object.keys(rspData).length !== 0) {
return true
}
return false
}
return (
fetchData(
'https://jsonplaceholder.typicode.com/posts/1/comments',
'GET'
)
}
>
Get Posts
{isLoading && Loading Content...
}
{hasError && Some error occurred, try again.
}
{checkData() &&
rspData.data.map((comment: any) => {
return (
{comment.title}
{comment.body}
)
})}
)
}
export default App
```
#### PATCH/PUT
```tsx
import React from 'react'
import useAxiosHook from 'axios-hook-library'
import logo from './logo.svg'
import './App.css'
const App = () => {
const { isLoading, isSuccess, hasError, fetchData } = useAxiosHook()
const formData = {
title: 'Axios Hook Library',
userId: 1,
}
return (
fetchData(
'https://jsonplaceholder.typicode.com/posts/1',
'PATCH',
formData
)
}
>
Send Request
{isLoading && Sending Data...
}
{hasError && Some error occurred, try again.
}
{isSuccess && Post Updated!
}
)
}
export default App
```
#### DELETE
```tsx
import React from 'react'
import useAxiosHook from 'axios-hook-library'
import logo from './logo.svg'
import './App.css'
const App = () => {
const { isLoading, isSuccess, hasError, fetchData } = useAxiosHook()
return (
fetchData(
'https://jsonplaceholder.typicode.com/posts/1',
'DELETE'
)
}
>
Delete Post
{isLoading && Trying to delete...
}
{hasError && Some error occurred, try again.
}
{isSuccess && Deleted with success!
}
)
}
export default App
```
## TODO
Here are some features that i want to add in the package. If you want to help, send me a PR
- [ ] Create a DOC page;
- [ ] Create Unitary tests to the React Hook function;
- [ ] Add Husky to the project
- [ ] Check and fix all types;
- [ ] Add Headers param in fetchData function;
- [ ] Add Headers Fields to Input headers options on Playground/Preview URL;
- [ ] Check the code and dependencies looking for Security Issues;
## License
MIT © [Nick Lima](https://github.com/nicklima)