mohammed53use-fetch-response v1.0.12

use-fetch-response

🚀 A React custom hook for seamless API integration with Axios. Simplify your API requests with features like loading states, error handling, and HTTP status management.

Overview

use-fetch-response is a lightweight, reusable React hook designed for making HTTP requests with Axios. Whether you're dealing with GET, POST, PUT, or DELETE requests, this hook simplifies the entire process by managing:

• Request state (loading, error, and response)
• HTTP status codes
• Support for JSON and FormData payloads

Built for developers who want to reduce boilerplate code and focus on functionality.

Key Features

✨ Lightweight & Fast: Minimal dependencies, optimized for performance.
✨ Axios-Powered: Leverage Axios for robust HTTP requests.
✨ Error Handling: Effortlessly handle errors and status codes.
✨ State Management: Get real-time feedback with loading, response, and error states.
✨ Flexible Payloads: Supports JSON and multipart requests (e.g., file uploads).

Installation

# NPM
npm install use-fetch-response

# Yarn
yarn add use-fetch-response

Quick Start Guide

Here’s how to use use-fetch-response in your React application:

1. Basic Usage

import React from "react";
import { useFetchResponse } from "use-fetch-response";

const App = () => {
  const { fetchData, response, error, loading } = useFetchResponse();

  const fetchUserData = () => {
    fetchData({
      url: "https://jsonplaceholder.typicode.com/users",
      method: "GET",
    });
  };

  return (
    <div>
      <button onClick={fetchUserData}>Fetch User Data</button>
      {loading && <p>Loading...</p>}
      {error && <p>Error: {error.message || "An error occurred"}</p>}
      {response && <pre>{JSON.stringify(response, null, 2)}</pre>}
    </div>
  );
};

export default App;

2. Handling POST Requests with FormData

fetchData({
  url: "https://api.example.com/upload",
  method: "POST",
  body: new FormData(formElement),
});

API Reference

fetchData Parameters

Return Values

Values Returned by fetchData

Why Choose use-fetch-response?

1. Time-Saving:
   No need to write repetitive Axios logic.

2. Error Handling Built-In:
   Automatically captures and handles errors.

3. Status Code Awareness:
   Access HTTP status codes for advanced logic.

4. Flexible Design:
   Easily adaptable for various use cases.

Real-World Examples

Fetching Data from an API

fetchData({
  url: "https://api.example.com/data",
  method: "GET",
});

Making a POST Request with JSON Data

fetchData({
  url: "https://api.example.com/create",
  method: "POST",
  body: JSON.stringify({ name: "John", age: 30 }),
});

Who Can Benefit from use-fetch-response?

• React Developers: Looking to streamline HTTP requests.
• Beginners: Learn how to handle API requests effectively.
• Teams: Reduce boilerplate and enforce consistent patterns.

License

use-fetch-response is licensed under the MIT License.

Support

Have questions or issues? Feel free to reach out or open a GitHub issue. 😊

SEO Optimization

• Primary Keywords: React custom hook, Axios requests, useFetchResponse, HTTP requests in React.
• Secondary Keywords: React error handling, React state management, React Axios integration.
• Meta Description: Simplify API requests in React with use-fetch-response. Lightweight custom hook powered by Axios for handling HTTP requests, errors, and status codes.