svelte-notifications-stack

Svelte component for displaying notifications in the application.

Usage:

To use notifications-stack, you need to wrap a component that will be used to display notifications. For example, it can be a component that sends data to the server and receives a response, and depending on the response, we can show a notification. Or, you can wrap the entire application and use the notification wherever you need it.

Default notifications:

Let's say this is your application - App.svelte:

<script>
  import Notifications from 'svelte-notifications-stack';
  import Header from './Header'
  import Pages from './Pages'
  import Footer from './Footer'
</script>
<Notifications maxCount={3}>
  <div>
    <Header />
    <Pages />
    <Footer />
  </div>
</Notifications>

And now we want to use basic notifications in our application in the Pages component - Pages.svelte:

<script>
  import {getContext} from 'svelte';
  import {CONTEXT_NAME} from 'svelte-notifications-stack';
 
 
  const {add, types} = getContext(CONTEXT_NAME);
  const handleAddDefaultNotification = (type) => {
    add({message: 'Message', type})
  };
</script>
 
<div>
  Main page
  <button on:click={()=>handleAddDefaultNotification(types.INFO)}>
    Show info notification
  </button>
</div>

In this example, we take the notification context and use the add method to add the notification:

import {CONTEXT_NAME} from 'svelte-notifications-stack';
const {add, types} = getContext(CONTEXT_NAME);
const handleAddDefaultNotification = (type) => {
  add({message: 'Message', type})
};

Image basic notifications

Custom notifications:

Let's take the same application code as an example - App.svelte:

<script>
  import Notifications from 'svelte-notifications-stack';
  import Header from './Header'
  import Pages from './Pages'
  import Footer from './Footer'
</script>
<Notifications maxCount={3}>
  <div>
    <Header />
    <Pages />
    <Footer />
  </div>
</Notifications>

And let's create our custom notification:

<script>
  import {getContext} from 'svelte';
  import {CONTEXT_NAME} from 'svelte-notifications-stack';
  import CustomComponent from './CustomComponent';
 
  const {add} = getContext(CONTEXT_NAME);
 
  const handleAddCustomNotification = () => {
    add({
      component: CustomComponent, 
      componentProps: ({id})=>({
        id, 
        text: 'Custom text'
      })
    })
  };
</script>
<div>
  Main page
  <button on:click={handleAddCustomNotification}>
    Show custom notification
  </button>
</div>

And in our CustomComponent we receive props witch we passed in componentProps callback:

<script>
  import {getContext} from "svelte";
  import {CONTEXT_NAME} from "svelte-notifications-stack";
 
  export let id
  export let text
  const {close} = getContext(CONTEXT_NAME);
</script>
 
<div>
    <div>{text}</div>
    <div on:click={()=>close(id)}>close</div>
</div>

As you can see, we get id, text witch we passed in componentProps callback, and now we can close custom notification with close method from the context on:click={()=>close(id)}

Notifications.svelte props

Property	Values
maxCount	default: `5`. type: `number`
position	default: `bottom_right`. Place where notifications will be shown: type: `top_left`, `top_right`, `top_center`, `bottom_left`, `bottom_right`, `bottom_center`

Context methods and properties

Property/Method	Arguments/Values
add	`({ message, component, componentProps, type, timeout, duration})`
close	`(id)`
updatePosition	`(position)`
position	Current position where notifications will be shown
positions	Object with a list of positions
types	Object with a list of types

Method add, takes {message, component, componentProps, type, timeout, duration}

Table explaining properties in add argument:

Option	Value
message	`string`
component	`SvelteComponent`
componentProps	callback with params `({id: number, last: number, timeout: number, duration: number})`
type	type of notification
timeout	timeout after which the notification will disappear
duration	appear transition duration

Method close takes id for closing custom notification.

Method updatePosition for changing notifications appear position

npm