Svelte-alerter-component NPM

svelte-alerter-component

Easily add custom alerts to your svelte app

Usage

Add it to your svelte project:

$ npm i svelte-alerter-component --save

Then, pop it into the component that suites you:

<script>
	import AlerterComponent from 'svelte-alerter-component/component.svelte'; // In some cases you may need the pre compiled svelte: svelte-alerter-component/component
</script>

<Alerter/>

Then, from any page or component you need to, create a new alert:

import Alerter from 'svelte-alerter-component';

new Alerter({
	title: "Like this alert?" // or a svelte component instance
	style: "background: green; border-radius: 1px;"  // Optional.  You can also style alerts with this css selector: .svelte-alerter-component.alert
	time: 3000 // Alert will disapear in 3 seconds.  If no value is specified, the alert will not disapear automaticly
	undo: () => {console.log("Undone!")}  // If a value is specified, an undo button will apear on the alert.  You can style this button with .svelte-alerter-component.undo
}, () => {
	console.log("Alert has been removed!")
})

// or

let myAlert = new Alerter({
	title: "My Alert"
})
myAlert.show();  // Show the alert
myAlert.hide();  // Hide the alert
myAlert.remove();  // Remove the alert