Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/skepticmystic/svelte-daisyui-toast
A small toast library for Svelte, with DaisyUI styling
https://github.com/skepticmystic/svelte-daisyui-toast
daisyui notifications svelte toast
Last synced: 4 days ago
JSON representation
A small toast library for Svelte, with DaisyUI styling
- Host: GitHub
- URL: https://github.com/skepticmystic/svelte-daisyui-toast
- Owner: SkepticMystic
- Created: 2023-08-22T18:12:10.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-10-06T13:14:09.000Z (over 1 year ago)
- Last Synced: 2024-11-10T03:39:41.708Z (2 months ago)
- Topics: daisyui, notifications, svelte, toast
- Language: Svelte
- Homepage:
- Size: 53.7 KB
- Stars: 5
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Svelte-DaisyUI-Toast
A simple toast component for Svelte with [DaisyUI](https://daisyui.com/) styling.
## Installation
```bash
npm i svelte-daisyui-toast
```
## Quick Start
You'll need a Svelte project with [DaisyUI installed](https://daisyui.com/docs/install/).
1. Add the styles to your `tailwind.config.js` file:
```diff
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
'./src/**/*.{html,js,svelte,ts}',
+ './node_modules/svelte-daisyui-toast/dist/**/*.{js,svelte}',
]
// ...
};
```
2. Add the `` component to your `+layout.svelte` file.
3. Add new toasts using the methods on the `toast` store.
```svelte
import { Toaster, toast } from 'svelte-daisyui-toast';
toast.addInfo('Hello, world!')}> Add Toast
```
## Types
Some types used in the API.
```ts
/** Represents an individual toast in the store */
type Toast = {
/** Random nanoid generated when adding a new toast. Used to remove toast later */
id: string;
/** Type of toast. Affects which DaisyUI styles are applied */
type: 'success' | 'info' | 'warning' | 'error';
/** Message to display in the toast */
message: string;
/** Whether to render the message as HTML. Defaults to false */
html?: boolean;
/** How many milliseconds to show for before removing.
* If not set, toast will not be removed automatically.
*/
duration_ms?: number;
/** Show an icon on the left side of the toast.
* Can be a component or a string.
*/
icon?: ComponentType | string;
/** Only render toast if `showOnRoutes.some(route => $page.url.path.startsWith(route))`.
* By default, shows on all routes
*/
showOnRoutes?: string[];
/** Remove toast when navigating away from the current route.
* By default, toast will not be removed when navigating away
*/
clearOnNavigation?: boolean;
};
export type AddToastOptions = {
/** Only add if queue is empty */
ifEmpty?: boolean;
/** Clear queue before adding */
clearQueue?: boolean;
};
```
## API
### Adding a toast
The base method to add new toasts to the store is `toast.add`:
```ts
function add(
toast: Omit,
addToastOptions?: AddToastOptions
): {
/** The id of the new toast */
id: string;
};
```
There are also shorthand methods to add each `type` of toast (each with the same function signature):
```ts
function addTYPE(
message: string,
extras?: {
newToast?: Omit;
addToastOptions?: AddToastOptions;
}
): { id: string };
```
The full list of shorthands is:
- `toast.addSuccess`
- `toast.addInfo`
- `toast.addWarning`
- `toast.addError`
For example, `toast.addSuccess('Hello, world!')` is equivalent to `toast.add({ type: 'success', message: 'Hello, world!' })`.
### Removing a toast
To remove a toast, use `toast.remove`, passing in the `id` of the toast to remove:
```ts
function remove(id: string): void;
```
## Toaster Component
The `` component is used to render the toasts in the store. It should be placed in your `+layout.svelte` file.
It accepts the following props:
### `alignment`
Determines where the toasts are rendered on the screen. Defaults to bottom-right
```ts
{
x?: 'start' | 'center' | 'end';
y?: 'top' | 'middle' | 'bottom';
}
```
These values _align_ (👀) with the [DaisyUI classes for the Toast component](https://daisyui.com/components/toast/).