Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ABWalters/react-api-hooks
React hooks to interact with an API from a stateless component using axios.
https://github.com/ABWalters/react-api-hooks
api axios hooks react react-hooks reactjs stateless-components
Last synced: about 2 months ago
JSON representation
React hooks to interact with an API from a stateless component using axios.
- Host: GitHub
- URL: https://github.com/ABWalters/react-api-hooks
- Owner: ABWalters
- License: mit
- Created: 2019-03-09T14:13:46.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2020-09-10T18:41:54.000Z (about 4 years ago)
- Last Synced: 2024-07-22T07:46:14.685Z (2 months ago)
- Topics: api, axios, hooks, react, react-hooks, reactjs, stateless-components
- Language: JavaScript
- Homepage: https://react-api-hooks.abwalters.now.sh/
- Size: 3.94 MB
- Stars: 64
- Watchers: 3
- Forks: 8
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-react-hooks - React API Hooks - React hooks to interact with an API from a stateless component using axios. (Packages)
README
# React API Hooks
React hooks to interact with an API from a stateless component using axios.
## Features:
- Uses axios and allows for complete request control
- Works with stateless/functional components
- Ability to filter and paginate API results
- Ability to delay API calls while the user is typing
- Works with infinite scroll components
- Request auto-cancellation for concurrent requests or component unmount
## Examples:
- [Basic](https://react-api-hooks.abwalters.now.sh/examples/basic/)
- [Pagination](https://react-api-hooks.abwalters.now.sh/examples/pagination/)
- [Filtering](https://react-api-hooks.abwalters.now.sh/examples/filter/)
- [Infinite Scroll](https://react-api-hooks.abwalters.now.sh/examples/inf-scroll/)
## Installation:
```
npm i react-api-hooks -s
```
## Basic Usage:
```javascript
import { useAPI } from 'react-api-hooks';
const TestComponent = () => {
const { data=[], error, isLoading } = useAPI(url);
if (error){
return
}
if (isLoading){
return
}
return (
{data.map(item => {item.text})}
)
}
```
## Advanced Usage
```javascript
import { useAPI } from 'react-api-hooks';
const TestComponent = () => {
const axiosConfig = {
method: 'POST',
data: { foo: 'bar' },
params: { id: '14' }
};
const { response, error, isLoading } = useAPI(url, axiosConfig);
if (error){
return
}
if (isLoading){
return
}
return (
{response.data.map(item => {item.text})}
)
}
```
## Reference:
- [useAPI](https://react-api-hooks.abwalters.now.sh/reference/use-api/)
- [useParams](https://react-api-hooks.abwalters.now.sh/reference/use-params/)
- [useInfAPI](https://react-api-hooks.abwalters.now.sh/reference/use-inf-api/)