0.1.11 • Published 4 years ago
react-hook-useapi v0.1.11
react-hook-useAPI
handle the restful api easily
Installation
npm install react-hook-useapi
or
yarn add react-hook-useapi
Configuration
| Prop | Type | Required | Description |
|---|---|---|---|
| url | string | Yes | The restufl api url, e.g 'api/users' |
| fetchOptions | object | No | The options what needs to add in the request |
| handleError | function | No | (response) => void It will run this function when response's status code is not success(status code != 2xx) |
Props
| Prop | Type | Description | Default |
|---|---|---|---|
| data | object | Use to store the response json | {results:[]} |
| filter | object | Use to store search params | {page:1} |
| read | function | Function(filter) The function use to get the list | |
| getDetail | function | Fucntion(key) The function use to get the item's detail | |
| create | function | Function(values) The function use to create new item | |
| update | function | Function(key, values) The function use to update item | |
| del | function | Function(key) The function use to delete item |
Example
import React, { useEffect } from 'react';
import useAPI from 'react-hook-useapi';
export default const App = () => {
const { data, read, del } = useAPI({
url: '/api/tasks/',
handleError: res => {
console.log(res.status);
}
});
useEffect(() => {
read();
},[read])
return (
<div>
<h3>Example</h3>
<table>
<thead>
<tr>
<th>Title</th>
<th>Description</th>
<th>Operations</th>
</tr>
</thead>
<tbody>
{data.results.map(task => <tr key={task.id}>
<td>{task.title}</td>
<td>{task.description}</td>
<td>
<button onClick={() => del(task.id)}>Delete</a>
</td>
</tr>)}
</tbody>
</table>
</div>
)
}