FlashMessages

@import url("@uxf/ui/flash-messages/flash-messages.css");

// _app.tsx

import {AppProps} from "next/app";
import {FlashMessages, getFlashMessagesRef} from "@uxf/ui/flash-messages";

function App(props: AppProps) {
    return (
        <UiContextProvider value={...}>
            {props.children}
            <FlashMessages ref={getFlashMessagesRef()}/>
        </UiContextProvider>
    );
}

import { flashMessage } from "@uxf/ui/flash-messages";

flashMessage({ message: <span>Everything is alright.</span> });

flashMessage({
    message: <span>Error message.</span>,
    variant: "error",
});

flashMessage({
    message: <span>Just letting you know</span>,
    autoDismiss: false,
    variant: "info",
});