AlertComponent

Installation

You can add this package to your project by using these options:

yarn:

  yarn add @fluffys/alertcomponent

npm:

  npm i @fluffys/alertcomponent

Usage

Add the AlertComponent to the component of your choice and set an origin.

import {AlertComponent} from "@fluffys/alertcomponent";

function App() {
    
    return (
        <>
            <AlertComponent origin={"Main-Window"}/>
        </>
    )
}

To send a message to an AlertComponent, you can import and use the MessengerHelper helper tool.

import {MessengerHelper} from "@fluffys/alertcomponent";
//...
const messengerHelper = new MessengerHelper();

messengerHelper.sendMessage({
    message: "Hello World",
    severity: "success",
    duration: 1000,
    destination: "Main-Window"
})
//...

Important to know

This is the base layout of a message:

• message: is containing alert content
• severity: contains the type of alert
• duration: contains number of seconds in milliseconds (is not needed)
• origin: contains string where it should appear (must match with any AlertComponent origin)

export interface AlertMessage {
    message: string;
    severity: "success" | "warning" | "error" | "info";
    duration?: number | undefined;
    destination: string;
}

Optional Usage

The Message helper is basically just a broadcast channel. As log as you name it "triggerAlert" and respect the message layout, it will work.

channel = new BroadcastChannel("triggerAlert");

channel.postMessage({
    message: "Hello World",
    severity: "success",
    duration: 1000,
    destination: "Main-Window"
});

License

MIT