https://github.com/whizzes/svelte-notifications

Svelte Library to Manage UI Notifications
https://github.com/whizzes/svelte-notifications

notifications package svelte

Last synced: about 7 hours ago
JSON representation

Svelte Library to Manage UI Notifications

• Host: GitHub
• URL: https://github.com/whizzes/svelte-notifications
• Owner: whizzes
• License: mit
• Created: 2023-04-26T15:32:49.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-02-19T23:23:32.000Z (10 months ago)
• Last Synced: 2024-11-05T11:00:32.603Z (about 2 months ago)
• Topics: notifications, package, svelte
• Language: TypeScript
• Homepage:
• Size: 426 KB
• Stars: 1
• Watchers: 1
• Forks: 1
• Open Issues: 7
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


  
svelte-notifications

  


    Svelte Library to Manage UI Notifications

  





![Build](https://github.com/whizzes/svelte-notifications/workflows/build/badge.svg)

![Tests](https://github.com/whizzes/svelte-notifications/workflows/test/badge.svg)

![Lint](https://github.com/whizzes/svelte-notifications/workflows/lint/badge.svg)

![Publish](https://github.com/whizzes/svelte-notifications/workflows/publish/badge.svg)

[![Version](https://img.shields.io/npm/v/@whizzes/svelte-notifications.svg?style=flat)](https://www.npmjs.com/package/@whizzes/svelte-notifications)

[![Downloads](https://img.shields.io/npm/dm/@whizzes/svelte-notifications.svg?style=flat)](https://www.npmjs.com/package/@whizzes/svelte-notifications)



## Getting Started

To use the Svelte Notifications library in your Svelte application, you can install it using npm:

```bash

npm install @whizzes/svelte-notifications

```

## Example

```html

  import {

    NotificationList,

    notifications,

    Position

  } from '@whizzes/svelte-notifications';

  const success = () => {

    notifications.notifySuccess('Hello World!');

  };

Append Success

  


    {notification.title}

    
{notification.message}

  


```

## Usage

Import the `NotificationList` component and use [Svelte's Slot Props](https://svelte.dev/tutorial/slot-props) to

consume a Notification's data.

```javascript

import { NotificationList, notifications } from '@whizzes/svelte-notifications';

```

### Provide the NotificationList component

The NotificationList component is the container of the notifications. It should be placed at the layout of your application, so it can be visible in all the pages.

You can set the position of the notifications by passing the `position` prop to the NotificationList component. The available positions are the following using the `Position` enum:

- `Position.TopLeft`

- `Position.TopCenter`

- `Position.TopRight`

- `Position.BottomLeft`

```html

  import { NotificationList, Position } from '@whizzes/svelte-notifications';

  

  


    {notification.title}

    
{notification.message}

  


```

### Push a notification

To add a notification, you can use some of the methods available in the `notifications` object.

```javascript

import { notifications } from '@whizzes/svelte-notifications';

// Add a success notification

notifications.notifySuccess('Hello World!');

// Add an error notification

notifications.notifyError('Hello World!');

// Add a warning notification

notifications.notifyWarning('Hello World!');

```

## Development

```bash

git clone [email protected]:whizzes/svelte-notifications.git

cd ./svelte-notifications

npm i

npm run dev

```

## Contributing

Feel free to open pull requests or issues on [our GitHub Repository][1].

[1]: https://github.com/whizzes/svelte-notifications