tailwind-ui-library/src/hooks/useCustomEventDispatch.tsx

import React from "react";

type Param = {
    /**
     * Custom Event Name
     */
    name: string;
};

/**
 * # Dispatch Custom Event
 */
export default function useCustomEventDispatch<
    T extends { [key: string]: any } = { [key: string]: any }
>({ name }: Param) {
    const dispatchCustomEvent = React.useCallback((value: T | string) => {
        let dataParsed = typeof value == "object" ? value : undefined;
        const str = typeof value == "string" ? value : undefined;

        if (str) {
            try {
                dataParsed = JSON.parse(str);
            } catch (error) {}
        }

        const event = new CustomEvent(name, {
            detail: {
                data: dataParsed,
                message: str,
            },
        });

        window.dispatchEvent(event);
    }, [name]);

    return { dispatchCustomEvent };
}