axios-react-hook

A lightweight React hook for Axios-based API calls with support for all HTTP methods.

v2.0.0 — V2 is now the default import. Existing users on ^1.0.0 are not affected — npm never auto-upgrades across major versions. If you upgrade manually, see the migration guide below.

---

Features

Default (V2)

• ✅ Object-based config — readable, no positional-arg juggling
• ✅ Query params serialised into the URL automatically
• ✅ Per-request headers and timeout
• ✅ onSuccess / onError callbacks
• ✅ AbortController cancellation — prevents race conditions and unmount warnings
• ✅ HTTP status code in return value
• ✅ cancel() to abort in-flight requests manually
• ✅ Supports GET, POST, PUT, PATCH, DELETE and more
• ✅ Auto-fetch on mount, manual trigger via refetch()
• ✅ Pass your own Axios instance

V1 (still available at axios-react-hook/v1)

• ✅ Positional-argument API — unchanged since 1.0.0

---

Installation

npm install axios-react-hook

---

Quick Start

V2 (default)

import useAxios from 'axios-react-hook';

function Posts() {
  const { data, loading, error, status } = useAxios({
    url: 'https://jsonplaceholder.typicode.com/posts',
    params: { _limit: 10 },
  });

  if (loading) return <p>Loading…</p>;
  if (error)   return <p>{status} — {error.message}</p>;

  return (
    <ul>
      {data.map(post => <li key={post.id}>{post.title}</li>)}
    </ul>
  );
}

V1 (legacy)

import useAxios from 'axios-react-hook/v1';

function Posts() {
  const { data, loading, error } = useAxios(
    'https://jsonplaceholder.typicode.com/posts'
  );

  if (loading) return <p>Loading…</p>;
  if (error)   return <p>Error: {error.message}</p>;

  return (
    <ul>
      {data.map(post => <li key={post.id}>{post.title}</li>)}
    </ul>
  );
}

---

Import paths

Import path	API	Who should use it
axios-react-hook	V2	Everyone on a fresh install / new code
axios-react-hook/v2	V2	Explicit V2 import (same as default)
axios-react-hook/v1	V1	Users who upgraded and need the old API

---

API Reference

V2 Options

Option	Type	Default	Description
url	string	—	Request URL (required)
method	string	'get'	HTTP method: get post put patch delete
body	any	null	Request body (POST / PUT / PATCH / DELETE)
params	object	null	URL query parameters e.g. { page: 1, limit: 10 }
headers	object	null	Per-request headers
timeout	number	0	Request timeout in ms (0 = no timeout)
auto	boolean	true	Auto-fire on mount and whenever config changes
instance	AxiosInstance	axios	Custom axios instance
onSuccess	Function	null	Called with (data, response) on success
onError	Function	null	Called with (error) on failure

V2 Return value

Key	Type	Description
data	any	Response payload
loading	boolean	true while a request is in flight
error	Error	Error from the last failed request
status	number	HTTP status code (200, 404, …) or null
refetch	Function	Manually trigger the request
cancel	Function	Cancel the currently in-flight request

---

Migrating V1 → V2

// Before (V1)
import useAxios from 'axios-react-hook/v1';
const { data, loading, error, refetch } = useAxios(url, method, body, auto, instance);

// After (V2)
import useAxios from 'axios-react-hook';
const { data, loading, error, status, refetch, cancel } = useAxios({
  url, method, body, auto, instance,
});

---

Changelog

See CHANGELOG.md.

---

License

MIT © Muhammed Rashid