react-custom-hook-use-axios

Installation

npm i react-custom-hook-use-axios

Features

• 1 dependency (axios)
• Use jsonplaceholder API for Demo

Usage

import { useFetch } from 'react-custom-hook-use-axios';
 
const BasicUsage = () => {
 
    const [user, setUser] = useState(1);
    const [loading, response, , error] = useFetch({
        url: `https://jsonplaceholder.typicode.com/todos/${user}`
    }, [user]);
 
    return (
        <div
            style={{
                marginTop: '10px',
                padding: 12
            }}
        >
            <div>
                current user: {user}
            </div>
            <div>
                <button
                    onClick={() => {
                        if (loading) return
                        setUser(user + 1)
                    }}
                >
                    {
                        loading
                            ? 'loading...'
                            : 'Next user'
                    }
                </button>
            </div>
            {
                error
                    ? error
                    : null
            }
            {
                loading
                    ? ('loading...')
                    : (
                        response
                            ? response.title
                            : null
                    )
            }
        </div>
    )
 
}

Overview

Hook

Name	Description
loading	給畫面用的 loading 參數
response	API 的 response data
fetchData	手動調用 "fetchData" fn (如果有需要的話)
error	API 的錯誤訊息 (如果有需要的話)

Options

Option	Description
options	完全參照 axios API 參數
deps	有條件的 觸發 effect