Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mzohaibqc/svelte-toasts
A highly configurable notification/toast component with individual toast state management capabilities.
https://github.com/mzohaibqc/svelte-toasts
notifications svelte svelte-toasts toasts
Last synced: about 1 month ago
JSON representation
A highly configurable notification/toast component with individual toast state management capabilities.
- Host: GitHub
- URL: https://github.com/mzohaibqc/svelte-toasts
- Owner: mzohaibqc
- License: mit
- Created: 2021-03-03T20:43:15.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2024-03-14T13:15:31.000Z (10 months ago)
- Last Synced: 2024-04-24T18:24:03.267Z (8 months ago)
- Topics: notifications, svelte, svelte-toasts, toasts
- Language: Svelte
- Homepage: https://mzohaibqc.github.io/svelte-toasts/
- Size: 1.88 MB
- Stars: 43
- Watchers: 3
- Forks: 6
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Svelte-Toasts
A highly configurable toast/notification component with individual toast state management capabilities.
## Demo & Docs
https://mzohaibqc.github.io/svelte-toasts/
REPL: https://svelte.dev/repl/ff34bad88213493ab878c71497c01152?version=3.35.0
## 
#### Flat Toast
#### Bootstrap Toast
## Install
> npm i svelte-toasts
or if you are using yarn
> yarn add svelte-toasts
## Getting Started
```javascript
import { toasts, ToastContainer, FlatToast, BootstrapToast } from "svelte-toasts";
const showToast = () => {
const toast = toasts.add({
title: 'Message title',
description: 'Message body',
duration: 10000, // 0 or negative to avoid auto-remove
placement: 'bottom-right',
type: 'info',
theme: 'dark',
placement: 'bottom-right',
type: 'success',
theme,
onClick: () => {},
onRemove: () => {},
// component: BootstrapToast, // allows to override toast component/template per toast
});
// toast.remove()
};
Svelte Toasts
Show Toast
```
Every `toast` object has following structure:
```javascript
{
title: "Welcome",
description: "Thanks for trying svelte-toasts!",
uid: 1615153277482,
placement: "bottom-right",
type: "success",
theme: "dark",
duration: 0,
remove: () => { /* implementation */ },
update: () => { /* implementation */ },
onClick: () => { console.log("Toast clicked"); }
onRemove: () => { console.log("Toast removed"); },
// and whatever properties that you want to add when calling toasts.add(options)
}
```
Below is a detail description of every property.
Prop Type Default Description
titlestring-Title of toast descriptionstring-Description/body of toast removeFunction-Invoking remove method will remove the respective toast object from store/UI. e.g. toast1.remove() updateFunction-Invoke update method to update a specific toast values like title, description or duration etc. toast.update({ title; "Progress: 80%" }) onClickFunction() => {}You can provide onClick callback which will be invoked when toast will be clicked (except toast close icon/button) onRemoveFunction() => {}You can provide onRemove callback which will be invoked when toast will be auto removed or removed by clicking on cross icon/button. componentSvelte Component-You can provide your own toast component to render toast for a specific toast object placementstring-Set placement of current toast, it will override default placement set by ToastContainer showProgressboolean-If set to "true" and duration is greater than 0 then a timeout progress bar will be shown at the bottom of current toast. It will override default value set by ToastContainer. themestring-"dark" and "light" themes are implemented for builtin Toast components but in case of your own Toast component, you can implement or leave this feature. This will override default value set by ToastContainer if you are using builtin Toast components. typestring-Four types of toasts are available i.e. success, info, error and warning. It will override toast type set by ToastContainer. durationnumber-Duration in milliseconds after which toast will be auto removed. If duration will be 0 or negative, toast will not be auto removed but user can click on cross icon to remove it. It will override duration specified by ToastContainer.
### Helper Methods
You can use helper functions to create toast with just message argument.
> toasts.success('Message body here'); // just 1 argument
> toasts.success('Message Title', 'Message body here'); // 2 arguments, title, description
> toasts.success('Message Title', 'Message body here', { duration: 5000 }); // 3 arguments, title, description and all other options object
Similarly,
toasts.info(), toasts.warning() and toasts.error()
## Docs
## Store
- [`ToastStore`](#ToastStore)
## Components
- [`BootstrapToast`](#bootstraptoast)
- [`FlatToast`](#flattoast)
- [`ToastContainer`](#toastcontainer)
---
## `ToastStore`
```javascript
import { toasts } from 'svelte-toasts';
```
Store `toasts` contains an array of toasts objects. It has following methods:
Name Type Description
addFunctionThis is key function to show toast. You can pass options and modify the generated toast. It will return toast object which you can use to modify or remove that specific toast programmatically, e.g. toast1.update({ title: 'New Title'}) removeAllFunctionThis function removes all toasts and clears store state to empty array removeLastFunctionThis function removes one toast (if any) that was generated at the end getByIdFunctionThis function returns toast data for given id. Every toast has a unique uid setDefaultsFunctionThis function sets default options so you don't need to pass those options again and again, e.g. theme, placement etc. successFunctionShow success/green toast. infoFunctionShow info/blue toast. errorFunctionShow error/red toast. warningFunctionShow warning/orange toast.
## `BootstrapToast`
```javascript
import { BootstrapToast } from 'svelte-toasts';
```
### Props
| Prop name | Kind | Reactive | Type | Default value | Description |
| :-------- | :--------------- | :------- | :-------------------------------------- | -------------------- | ---------------------------- |
| theme | let | No | [Theme](#theme) | 'light' | Default theme for all toasts |
| data | let | No | [ToastProps](#ToastProps) | {} | Default theme for all toasts |
### Slots
| Slot name | Default | Props | Fallback |
| :--------- | :------ | :---- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| close-icon | No | -- | <svg
xmlns="http://www.w3.org/2000/svg"
class="bx--toast-notification\_\_close-icon"
width="20"
height="20"
viewBox="0 0 32 32"
aria-hidden="true"
>
<path
d="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z"
/>
</svg> |
| extra | No | -- | -- |
| icon | No | -- | Svg icons based on type |
### Events
None.
## `FlatToast`
```javascript
import { FlatToast } from 'svelte-toasts';
```
### Props
| Prop name | Kind | Reactive | Type | Default value | Description |
| :-------- | :--------------- | :------- | :--------------------------------------- | -------------------- | ---------------------------- |
| theme | let | No | [Theme](#theme) | 'light' | Default theme for all toasts |
| data | let | No | [ToastProps](#ToastProps) | {} | Default theme for all toasts |
### Slots
| Slot name | Default | Props | Fallback |
| :--------- | :------ | :---- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| close-icon | No | -- | <svg
xmlns="http://www.w3.org/2000/svg"
class="bx--toast-notification\_\_close-icon"
width="20"
height="20"
viewBox="0 0 32 32"
aria-hidden="true"
>
<path
d="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z"
/>
</svg> |
| extra | No | -- | -- |
| icon | No | -- | Svg icons based on type |
### Events
None.
## `ToastContainer`
```javascript
import { ToastContainer } from 'svelte-toasts';
```
### Props
| Prop name | Kind | Reactive | Type | Default value | Description |
| :----------- | :--------------- | :------- | :------------------------------------- | --------------------------- | ---------------------------------------------------------------------- |
| theme | let | No | [Theme](#Theme) | 'dark' | Default theme for all toasts |
| placement | let | No | [Placement](#Placement) | 'bottom-right' | Default placement for all toasts |
| type | let | No | [ToastType](#ToastType) | 'info' | Default type of all toasts |
| showProgress | let | No | boolean | false | Show progress if showProgress is true and duration is greater then 0 |
| duration | let | No | number | 3000 | Default duration for all toasts to auto close. 0 to disable auto close |
| width | let | No | 'string' | '320px' | Width of all toasts |
### Slots
| Slot name | Default | Props | Fallback |
| :-------- | :------ | :------------------------------------------------ | :------- |
| -- | Yes | { data: [ToastProps](#ToastProps) } | -- |
### Events
None.
## Types
#### `Theme`
```ts
export type Theme = 'dark' | 'light';
```
#### `ToastType`
```ts
export type ToastType = 'success' | 'info' | 'error' | 'warning';
```
#### `Placement`
```ts
export type Placement =
| 'bottom-right'
| 'bottom-left'
| 'top-right'
| 'top-left'
| 'top-center'
| 'bottom-center'
| 'center-center';
```
#### `ToastProps`
```ts
export interface ToastProps {
uid: number;
title?: string;
description: string;
duration: number;
type: ToastType;
theme?: Theme;
placement: Placement;
showProgress?: boolean;
remove?: Function;
update?: Function;
onRemove?: Function;
onClick?: Function;
}
```
#### `ToastStore`
```ts
export interface ToastStore extends Writable {
add(options: Partial): ToastProps;
success(options: Partial): ToastProps;
success(description: string): ToastProps;
success(description: string, options: Partial): ToastProps;
success(
title: string,
description: string,
options?: Partial
): ToastProps;
info(options: Partial): ToastProps;
info(description: string): ToastProps;
info(description: string, options: Partial): ToastProps;
info(
title: string,
description: string,
options?: Partial
): ToastProps;
error(options: Partial): ToastProps;
error(description: string): ToastProps;
error(description: string, options: Partial): ToastProps;
error(
title: string,
description: string,
options?: Partial
): ToastProps;
warning(options: Partial): ToastProps;
warning(description: string): ToastProps;
warning(description: string, options: Partial): ToastProps;
warning(
title: string,
description: string,
options?: Partial
): ToastProps;
getById(uid: number): ToastProps;
clearAll(): void;
clearLast(): void;
setDefaults(options: Partial): void;
}
```