Post-get-data-hook 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.