Svelte Alerts

A complete alert and warning package in svelte.

Features

  • Light/dark alert
  • Success alert
  • Warn alert
  • Error alert
  • Info alert

Installation

Install into the project using npm

npm install @pedrofreit4s/avelte-alerts

Install into the project using yarn

yarn add @pedrofreit4s/avelte-alerts

Usage

First, index this link as icon dependency in font

<link
  href="https://unpkg.com/[email protected]/css/boxicons.min.css"
  rel="stylesheet"
/>

Add the provider to your application's global layout file +layout.svelteor another file

<AlertProvider options={{...}} />

Customization options

To add an alert

import { alert } from "@pedrofreit4s/svelte-alert";

function showAlert() {
  // params[0] = "success" | "warn" | "error" | "info"
  // params[1] = Message
  // params[2] = Hidden time in ms
  const alertId = alert.push(
    "success",
    "Your username has been successfully activated!",
    1500
  );
}

To remove an alert

import { alert } from "@pedrofreit4s/svelte-alert";

function removeAlert(alertId: string) {
  alert.remove(alertId);
}

Authors

Top categories

svelte logo

Need a Svelte website built?

Hire a professional Svelte developer today.
Loading Svelte Themes