bridge-svelte-notification Svelte Themes

Bridge Svelte Notification

Customisable and easy notifications system for svelte users

Bridge Notifications

Demonstration

https://bridge-notification.netlify.app

Getting started

npm install --save bridge-svelte-notification

Basic usage

// App.svelte

<script>
  import BridgeNotify from "bridge-svelte-notification";
  <main>
    <BridgeNotify />
    ...
  </main>
</script>
// ChildrenComponent.svelte

<script>
  import { notify } from "bridge-svelte-notification";

  function show(position) {
    notify({
      message: "Bridge Notification is Awesome 😍",
      type: 'success',
      duration: 3000,
      position: 'center',
      animate: {
            y: 100,
            x: 0,
            duration: 500
      }
    });
  }
</script>

<button on:click={show}> Show Notification </button>

Providing custom style component

// ChildrenComponent.svelte

import { notify } from "bridge-svelte-notification";

  function show(position) {
    notify({
      message: "Bridge Notification is Awesome 😍",
      type: 'success',
      duration: 3000,
      position: 'center',
      animate: {
            y: 100,
            x: 0,
            duration: 500
      },
      style:'backgound-color:blue;color:black'
    });
  }
</script>

<button on:click={show}> Show Notification </button>

Top categories

svelte logo

Need a Svelte website built?

Hire a professional Svelte developer today.
Loading Svelte Themes