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> 
  )
}