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.

License

This project is licensed under the ISC License.