boop-svelte

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.