Se crea un contexto para el mensaje de confirmación

import { createContext, ReactNode, useContext, useState } from "react";

type MessageContextType = {

  isVisible: boolean;

  message: string;

  showMessage: (message: string) => void;

  hideMessage: () => void;

}

const MessageContext = createContext<MessageContextType>({

  isVisible: false,

  message: "",

  showMessage: () => {},

  hideMessage: () => {}

});

type MessageContextProviderProps = {

  children: ReactNode;

}

export const MessageContextProvider = ({children}: MessageContextProviderProps) => {

  const [isVisible, setIsVisible] = useState<boolean>(false);

  const [message, setMessage] = useState<string>("");

  const showMessage = (message: string) => {

    setIsVisible(true);

    setMessage(message);

    setTimeout(() => {

      setIsVisible(false);

      setMessage("");

    }, 3000);

  };

  const hideMessage = () => {

    setIsVisible(false);

    setMessage("");

  };

  const value = {isVisible, message, showMessage, hideMessage};

  return <MessageContext.Provider value={value}>{children}</MessageContext.Provider>

}

export const useMessage = () => {

  if(MessageContext == undefined){

    throw new Error("useMessage debe se usado dentro de un MessageContextProvider");

  }

  return useContext(MessageContext);

};

 No newline at end of file