0.0.3 • Public • Published

    Boop-Svelte - Notifications for Svelte

    Extremely simple and customizable toast notifications for Svelte in a repository that responds to requests and issues.

    Forked from keenethics/svelte-notifications. That repository didn't seem to be getting much love, and its typings were completely broken, making it unusable for any TypeScript project.

    Why boop?

    Because every permutation of "toast" was taken, and because I was feeling cute.


    git clone
    cd boop-svelte
    yarn dev

    Getting started

    yarn add --dev boop-svelte
    npm install --save boop-svelte

    Basic usage

    Render Boops beside any component. I recommend as high up your application tree as possible to guarantee it's available:

    // MainComponent.svelte
    <script lang="ts">
      import Boops from 'boop-svelte';
      import App from './App.svelte';
    <Boops />
    <App />

    Import the store anywhere in your app to add or remove boops:

    // ChildComponent.svelte
    <script lang="ts">
      import boopStore from 'boop-svelte/store';
      import { BoopTypes, BoopPositions } from 'boop-svelte/constants';
      const { addBoop } = boopStore;
    <!-- All are optional except text; these are the defaults -->
      on:click={() => addBoop({
        id: myIdFunction(),
    	  text: "Hello, Svelte!",
    	  position: BoopPositions.TOP_CENTER,
    	  removeAfter: 4000,
    	  type: BoopTypes.SUCCESS,
      Add Boop

    Create your own wrappers to make your life easier:

    // lib/boops/Success.ts
    import boopStore from 'boop-svelte/store';
    const { addBoop } = boopStore;
    export const successBoop = (text: string): void =>
    		id: myIdFunction(),
    		text: `Success: ${text}`,
    		position: BoopPositions.TOP_RIGHT,
    		removeAfter: 5000,
    		type: BoopTypes.SUCCESS,

    Providing a custom boop component

    // MainComponent.svelte
      import Boops from 'boop-svelte';
      import CustomBoop from './CustomBoop.svelte';
      import App from './App.svelte';
    <Boops customBoop={CustomBoop} />
    <App />

    Custom components must fulfill the following type (all types are exported from boop-svelte/types):

    interface BoopProps {
    	id?: string;
    	text: string;
    	position?: BoopPositions;
    	removeAfter?: number;
    	type?: BoopTypes;
    type CustomBoopComponentProps = {
    	boopProps: BoopProps;
    	onRemove: () => void;
    // Implement this:
    type CustomBoop = SvelteComponentTyped<CustomBoopComponentProps>;



    The Boops component renders each Boop in its appropriate location.


    • customBoop - optional - a component implementing the CustomBoop type to override the DefaultBoop.
    • width - optional - a number indicating the width of your boops.
    • withUnits - optional - a valid CSS unit for your boop width.


    The store controlling which boops are displayed.


    Adds a boop given the boop definition (see BoopProps in boop-svelte/types):

    • id - optional - a unique identifier for your boop. If you don't want to provide one, this function will assign your boop one and return it.
    • text - required - the text to boop with.
    • position - optional - the position on the viewport to render the boop. import { BoopPositions } from 'boop-svelte/constants.
    • removeAfter - optional - milliseconds to wait before removing the boop.
    • type - optional - the type of boop to render. import { BoopTypes } from 'boop-svelte/constants.

    Returns: The ID of the boop.


    • id - required - Unique boop identifier supplied when calling addBoop.


    What it says on the tin. Goodbye, boops.


    Default Svelte subscribe method allowing you to watch the Boops store.


    npm i boop-svelte

    DownloadsWeekly Downloads






    Unpacked Size

    17.2 kB

    Total Files


    Last publish


    • tcc-sejohnson