Best API Hook

A custom React hook for making API calls with Axios, providing support for promises (try-catch) and exception handling through errors and headers.

Installation

To install the package, run:

npm install best-api-hook

Basic usage:

import React, { useEffect } from 'react';
import { useApi } from 'best-api-hook';

const App = () => {
  const { data, error, loading, setHeaders, updateUrl } = useApi('https://jsonplaceholder.typicode.com/posts');

  useEffect(() => {
    setHeaders({
      'Authorization': 'Bearer your-token-here',
    });
  }, [setHeaders]);

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

  return (
    <div>
      <h1>Posts</h1>
      <ul>
        {data && data.map(post => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
      <button onClick={() => updateUrl('https://jsonplaceholder.typicode.com/users')}>Load Users</button>
    </div>
  );
};

export default App;

API Documentation

useApi Hook

This custom React hook is designed for making API requests with Axios.

Parameters

• initialUrl (string): The initial URL for the API request.
• initialOptions (object): The initial options for the Axios request. This can include various properties such as headers, method, data, etc.

Returns

The useApi hook returns an object containing the following properties:

• data (any): The data returned from the API.
• error (object): The error object returned from the API, if any.
• loading (boolean): Indicates whether the request is in progress.
• setHeaders (function): A function to update the headers for the request.
• updateUrl (function): A function to update the URL for the request.
• updateOptions (function): A function to update other options for the Axios request.

Props

initialUrl (string)

The URL for the initial API request.

initialOptions (object)

The options for the initial Axios request. This can include the following properties:

• method (string): HTTP method (GET, POST, etc.). The default is GET.
• headers (object): HTTP headers to be sent with the request.
• data (object): Data to be sent as the request body for methods like POST.

Example with Custom Headers and Options

import React, { useEffect } from 'react';
import { useApi } from 'best-api-hook';

const App = () => {
  const { data, error, loading, setHeaders, updateUrl, updateOptions } = useApi('https://jsonplaceholder.typicode.com/posts', {
    method: 'GET',
    headers: {
      'Content-Type': 'application/json'
    }
  });

  useEffect(() => {
    setHeaders({
      'Authorization': 'Bearer your-token-here',
    });
  }, [setHeaders]);

  const handlePost = () => {
    updateUrl('https://jsonplaceholder.typicode.com/posts');
    updateOptions({
      method: 'POST',
      data: {
        title: 'foo',
        body: 'bar',
        userId: 1,
      }
    });
  };

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

  return (
    <div>
      <h1>Posts</h1>
      <ul>
        {data && data.map(post => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
      <button onClick={handlePost}>Create Post</button>
    </div>
  );
};

export default App;