React API Utils

A simple and reusable package providing an easy-to-use interface for integrating with common APIs in React applications. This package includes a custom hook for fetching data.

Installation

npm install react-api-utils

Features

• useApi Hook: Fetch data from APIs effortlessly with a custom hook that handles loading, error handling, and data retrieval.

• Customizable: Easily configure API endpoints, headers, and other options according to your project requirements.

• Error Handling: Receive detailed error information for better debugging and user feedback.

Usage

useApi

A hook for fetching data from a specified URL.

import React from 'react';
import { useApi } from 'react-api-utils';

const MyComponent = () => {
  const { data, error, loading } = useApi('https://api.example.com/data');

  if (loading) {
    return <p>Loading...</p>;
  }

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

  return (
    <div>
      <h1>Data from API:</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
};

export default MyComponent;

API Reference

• useApi(url: string, options?: object): { data: any, error: Error | null, loading: boolean }

• url: The URL to fetch data from. options (optional): Additional options for the fetch function, such as headers or request method. Returns an object with the following properties:

• data: The fetched data. error: An error object if an error occurred during the request, otherwise null. loading: A boolean indicating whether the data is still being fetched. Configuration Options

• You can customize the useApi hook by providing options:

const { data, error, loading } = useApi('https://api.example.com/data', {
  headers: {
    Authorization: 'Bearer YOUR_ACCESS_TOKEN',
    'Content-Type': 'application/json',
  },
  method: 'GET',
});