svelte-alerts

This is a Svelte component for managing and displaying alerts. The alert message is displayed using the Sveltestrap Alert component. Of course, you can replace this component with one that suites your application. And, of course, you can replace Bootstrap with any other CSS system, or your own stylesheets. And, finally, you can also change the material-icons for some of your preference.

The component uses a store to keep the messages. The objects representing the alerts have the following structure:

{
    id: // automatic
    type: // uno de ['info', 'danger', 'warning', 'success'], default 'info'
    dismissible: // boolean, default true
    timeout: // integer, dismiss timeout, 0 if permanent
    message: // string, the message to be shown
    title: // string, optional title, default ''
}

Dependencies

• Sveltestrap (you can use any other component for displaying alerts)

Installation

Copy the Alerts directory to your components directory.

Usage

<script>
// You must adjust the paths according to your setup:
import Alert from "components/Alerts/index.svelte";
import { alerts } from "components/Alerts/store";
</script>

<!-- the widget which displays alerts -->

<Alert></Alert>

<!-- you add messages to the alert store, which are displayed by the Alert widget -->

<button on:click="{() => alerts.add({message:"OK", type:"success", timeout:5000})}" class="btn btn-success">OK</button>

Notes

• A sample package.json is included, to show which the dependencies are.
• You can try it live here.

License

Copyright (c) 2021, Rodolfo González González.

See the LICENSE file.