React API Handler

A utility package for handling API requests in React projects.

Table of Contents

• Installation
• Usage
• Checking & Set Base URL

Installation

To install the package, run the following command:

For NPM

npm install react-api-handler

For Yarn

yarn add react-api-handler

Docs

Stay tuned! Our documentation website for react-api-handler is coming soon. You’ll be able to access it to easily read our docs and make the most out of react-api-handler.

Usage

Importing the Function First, import the apiRequest function in your React component:

import { apiRequest } from 'react-api-handler';

Important Note: Inside endpoint: '' param complete api url send only if not set base url inside futureapps.config.js file otherwise send only endpoint of api ex: userInfo

GET Request Example Here's an example of using the apiRequest function to make a GET request

import React, { useEffect } from 'react';
import { apiRequest } from 'react-api-handler';

const apiKey = ''; // Your API key and this is key used inside (Authorization Bearer)

const ExampleComponent = () => {

  useEffect(() => {
        // Example 1
        apiRequest({
            endpoint: 'https://api.example.com/user_info', 
            method: 'GET',
            apiKey: apiKey // send this apiKey only if needed (this is a Bearer Token)
        })
        .then(data => console.log('API Data:', data))
        .catch(error => console.error('API Error:', error))

        // Example 2
        const response = await apiRequest({
            endpoint: 'https://api.example.com/user_info',
            method: 'GET',
            apiKey: apiKey // send this apiKey only if needed (this is a Bearer Token)
        })

        if (response.status === true) {
            console.log('res:', response);
        } else {
            console.log('something went wrong:', response);
        }
    }, []);

    return (
        <div>API Data will be logged in the console</div>
    );
};

export default ExampleComponent;

POST Request Example Here's an example of using the apiRequest function to make a POST request:

import React from 'react';
import { apiRequest } from 'react-api-handler';

const apiKey = ''; // Your API key and this is key used inside (Authorization Bearer)

const ExampleComponent = () => {
    // Example 1
    const handleSubmit = () => {
      const postData = { name: 'future apps' };

      apiRequest({
          endpoint: 'https://api.example.com/signup',
          method: 'POST',
          data: postData,
          apiKey: apiKey // send this apiKey only if needed (this is a Bearer Token)
      })
      .then(response => console.log('API Response:', response))
      .catch(error => console.error('API Error:', error));
    };

    // Example 2
    const handleSubmit = async () => {
        const postData = { name: 'future apps' };

        const res = await apiRequest({
            endpoint: 'https://api.example.com/signup',
            method: 'POST',
            data: postData,
            apiKey: apiKey // send this apiKey only if needed (this is Bearer Token)
        })

        if (res.status === true) {
            console.log('res:', res);
        } else {
            console.log('something went wrong:', res);
        }
    };

  return (
    <div>
      <button onClick={handleSubmit}>Submit Data</button>
    </div>
  );
};

export default ExampleComponent;

Checking & Set Base URL

Example Usage Step 1: Set the Base URL in futureapps.config.js

Create a file named futureapps.config.js in the src directory of your project:

import { setConfig } from 'react-api-handler';
const base_url = process.env.REACT_APP_BASE_URL


setConfig({ baseUrl: base_url});

Step 2 Initialize futureapps.config.js file inside index.js file of your project:

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { BrowserRouter } from "react-router-dom";

import './futureapps.config' // import this file for initialize proper

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <BrowserRouter>
      <App />
  </BrowserRouter>
);

Check the Base URL Status Use the getBaseUrl function to check if the base URL has been set:

import { getBaseUrl } from 'react-api-handler';

  const checkBaseUrl = getBaseUrl();
  console.log(checkBaseUrl);

Output The getBaseUrl function will return one of the following messages:

If the base URL is set: Current base URL is: [your-base-url]

If the base URL is not set: Base URL is not set currently

Developed By

This is Future Tint are built by Future Apps Visit Our Website