notifte v1.0.11

Notifte

SVELTE Notification Component

A more or less simple and customisable, yet powerful Svelte notification component.

Notifte is obviously the combination of Notification and Svelte. The reason behind this combination is because Svelification sounds like something that hasn't anything to do with notifications.

Install

$ npm install notifte

Demo

Here's a simple REPL demo

Website demo : Coming Soon

Usage

You just have to import the notifte component and place it in your app shell. Then bind the component to a variable so you can access the component functions.

<script>
import Notifte from "notifte";

let notifte;

</script>

<Notifte bind:this={notifte} />

The props

You can initialize the component with these props: transition, template, gap and position

• the transition prop is an object that defines the animation to use when the notification shows or disapears here's the default value:

export let transition = {
  in: { 
    anim: fade, // the svelte fade animation || import { fade } from "svelte/transition";
    params: { duration: 225 } 
  },
  out: { 
    anim: fade, // the svelte fade animation || import { fade } from "svelte/transition";
    params: { duration: 175 } 
  },
}

You can add Svelte transition functions and their parameters as a prop, you can also make your own. Look here on how to make a custom Svelte transition function

• the template prop is a Svelte component that defines the look of the notification. The default template component has these props:
  • heading : the heading of the notification
  • content : the content of the notification
  • bgColor : the background color, a CSS color value (default to white)
  • txtColor : the text color, a CSS color value (default to black)
  • bdrColor : the border color, a CSS color value (default to txtColor)

You can create your own template with its own props and use it in place of the default template

• the gap prop is an integer that defines the gap between notifications. Here's the default value:

export let gap = 4; // 4 pixels

• the position prop is a CSS property that defines the position of the notifications. Here's the default value:

export let position = "bottom:4px;right:4px;";

Don't put any spaces and don't forget the ; at the end of the string

The functions

Here are the functions available to you after binding the component to a variable : notify, setTransition, setTemplate, setGap and setPosition

• the notify function lets you show a notification and takes these parameteres : templateProps, positionParam, templateParam, showTime

notifte.notify(
  { heading, content, bgColor, txtColor, bdrColor }, // depends on the props you have in your template
  "top:2px;right:2px;", // no spaces and don't forget the " ; " at the end of the string
  svelteComponent, // the template to use
  5000 // the display duration of the notification in ms; if 0 is provided, the notification will be displayed until you close it
)

• the setTransition allows you to change the transition animation

notifte.setTransition({
  in: { 
    anim: fade, // the svelte fade animation : import { fade } from "svelte/transition";
    params: { duration: 225 } 
  },
  out: { 
    anim: fade, // the svelte fade animation : import { fade } from "svelte/transition";
    params: { duration: 175 } 
  },
})

• the setTemplate allows you to change the template

import CustomTemplate from "./CustomTemplate.svelte"
notifte.setTemplate(CustomComponent)

• the setGap allows you to change the space between notifications

// in pixel
notifte.setGap(6)

• the setPosition allows you to change the position of the notifications

// no spaces
// don't forget the ";" at the end of the string parameter
notifte.setPosition("left:50%;bottom:4px;transform:translateX(-50%);")

Extend

Here's the Default template source code

<script>
  import { createEventDispatcher } from "svelte";

  export let heading = "";
  export let content = "";
  export let bgColor = "white";
  export let txtColor = "black";
  export let bdrColor = txtColor;

  const dispatch = createEventDispatcher();

  const close = () => {
    dispatch("close");
  };
</script>

<div
  style="padding:10px;width:275px;position:relative;background:{bgColor};color:{txtColor};border:1px solid {bdrColor};"
>
  <div style="font-weight:bold;font-size:1.1em;">
    {heading}
  </div>
  <div>
    {content}
  </div>
  <span style="--color:{bdrColor}" class="close-btn" on:click={() => close()} />
</div>

<style>
  .close-btn {
    --size: 14px;
    width: var(--size);
    height: var(--size);
    cursor: pointer;
    display: inline-block;
    position: absolute;
    top: 2px;
    right: 2px;
  }
  .close-btn:after,
  .close-btn:before {
    position: absolute;
    content: "";
    height: 1px;
    top: 50%;
    width: var(--size);
    background-color: var(--color);
  }
  .close-btn:after {
    transform: rotate(45deg);
  }
  .close-btn:before {
    transform: rotate(-45deg);
  }
</style>

You can customize the notification template all you want, be sure to dispatch close if you want to allow the notification to be closed after an action (like a click event)

Todos

Some features I plan to add :

• a countdown animation for the default template
• allowing events to be sent from the template so that we can perform different actions from the notification
• maybe allowing custom transitions for each notifications
• maybe add some templates that can be added through npm
• maybe remove css styles for positioning and replace it by a string like "top-left"

License

MIT