boop-svelte

    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.

    Demonstration

    git clone https://github.com/tcc-sejohnson/boop-svelte.git
    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';
    </script>
    
    <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;
    </script>
    
    <!-- All are optional except text; these are the defaults -->
    <button
      on:click={() => addBoop({
        id: myIdFunction(),
    	  text: "Hello, Svelte!",
    	  position: BoopPositions.TOP_CENTER,
    	  removeAfter: 4000,
    	  type: BoopTypes.SUCCESS,
      })}
    >
      Add Boop
    </button>

    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 =>
    	addBoop({
    		id: myIdFunction(),
    		text: `Success: ${text}`,
    		position: BoopPositions.TOP_RIGHT,
    		removeAfter: 5000,
    		type: BoopTypes.SUCCESS,
    	});

    Providing a custom boop component

    // MainComponent.svelte
    
    <script>
      import Boops from 'boop-svelte';
      import CustomBoop from './CustomBoop.svelte';
    
      import App from './App.svelte';
    </script>
    
    <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>;

    API

    Boops

    The Boops component renders each Boop in its appropriate location.

    Props:

    • 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.

    boopStore

    The store controlling which boops are displayed.

    addBoop

    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.

    removeBoop

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

    clearBoops

    What it says on the tin. Goodbye, boops.

    subscribe

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

    Install

    npm i boop-svelte

    DownloadsWeekly Downloads

    2

    Version

    0.0.3

    License

    GPL-3.0-or-later

    Unpacked Size

    17.2 kB

    Total Files

    16

    Last publish

    Collaborators

    • tcc-sejohnson