Instance-request NPM

Installation

You can install this package via npm:

npm i post-get-data-hook

Features

Flexible API Requests: Fetch and post data with optional headers and payloads.
Loading State Management: Automatically tracks loading states for both GET and POST requests.
Error Handling: Easily manage errors during data fetching or posting.
Data Transformation (GET only): Transform fetched data with a custom function.
Callbacks for Success and Error Handling: Provide custom behavior for successful and failed requests.

Usage: `useGetDataFromServer`

This hook is designed for making GET requests to fetch data from the server.

Example

import { useGetDataFromServer } from "post-get-data-hook";

const MyComponent = () => {
  const { data, isLoading, isError, fetchData } = useGetDataFromServer();

  const handleFetch = () => {
    fetchData({
      API_URL: "https://api.example.com/data",
      HEADERS: { Authorization: "Bearer myToken" },
      structureApiData: (data) => data.items, // Optional transformation
      onGetReqSuccess: (finalData) => console.log("Success:", finalData),
      onError: (error) => console.error("Error:", error),
    });
  };

  if (isLoading) return <p>Loading...</p>;
  if (isError) return <p>Error occurred!</p>;

  return (
    <div>
      <button onClick={handleFetch}>Fetch Data</button>
      {data && data.map((item) => <p key={item.id}>{item.name}</p>)}
    </div>
  );
};

Hook Parameters `(GET)`

API_URL (string): The URL of the API endpoint.
HEADERS (object, optional): Custom headers for the API request (default: {}).
onGetReqSuccess (function, optional): Callback function for handling successful data fetch.
onError (function, optional): Callback function for handling errors.
structureApiData (function, optional): Function to transform or structure the fetched data.

Return Values `(GET)`

data: The fetched API data, transformed if structureApiData is provided.
isLoading: A boolean value indicating if the request is currently in progress.
isError: A boolean value indicating if there was an error during the request.
fetchData: A function that triggers the API request with the provided parameters.

Usage: `usePostDataToServer`

This hook is designed for making POST requests to send data to the server.

Example

import { usePostDataToServer } from "post-get-data-hook";

const MyComponent = () => {
  const { data, isLoading, isError, postData } = usePostDataToServer();

  const handlePost = () => {
    postData({
      API_URL: "https://api.example.com/data",
      HEADERS: { Authorization: "Bearer myToken" },
      body: { name: "John", age: 30 },
      onPostReqSuccess: (response) => console.log("Success:", response),
      onError: (error) => console.error("Error:", error),
    });
  };

  if (isLoading) return <p>Loading...</p>;
  if (isError) return <p>Error occurred!</p>;

  return (
    <div>
      <button onClick={handlePost}>Send Data</button>
      {data && <p>Response: {JSON.stringify(data)}</p>}
    </div>
  );
};

Hook Parameters `(POST)`

API_URL (string): The URL of the API endpoint.
HEADERS (object, optional): Custom headers for the API request (default: {}).
body (object): The data to be sent in the POST request.
onPostReqSuccess (function, optional): Callback function for handling a successful POST request.
onError (function, optional): Callback function for handling errors.

Return Values `(POST)`

data: The response data from the server.
isLoading: A boolean value indicating if the request is currently in progress.
isError: A boolean value indicating if there was an error during the request.
postData: A function that triggers the POST request with the provided parameters.