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|