https://github.com/scriptraccoon/toast-components
This repo contains a single-file Toast component which you can copy paste into your Svelte (or SvelteKit) project.
https://github.com/scriptraccoon/toast-components
Last synced: 10 months ago
JSON representation
This repo contains a single-file Toast component which you can copy paste into your Svelte (or SvelteKit) project.
- Host: GitHub
- URL: https://github.com/scriptraccoon/toast-components
- Owner: ScriptRaccoon
- License: mit
- Created: 2023-06-02T16:45:48.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2024-01-26T00:07:30.000Z (over 2 years ago)
- Last Synced: 2025-03-03T03:17:06.129Z (over 1 year ago)
- Language: Svelte
- Homepage: https://toast-components.netlify.app
- Size: 31.3 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Toast components for Svelte
This repo contains a single-file Toast component which you can copy paste into your Svelte (or SvelteKit) project.
Demo: https://toast-components.netlify.app
The file [`src/lib/components/Toast.svelte`](https://github.com/ScriptRaccoon/toast-components/blob/main/src/lib/components/Toast.svelte) contains both the rendered Toast components as well as the function with which you can send toasts.
## Usage
Embed the Toast component to your `App.svelte`.
```svelte
import Toast from "./lib/components/Toast.svelte";
```
You can pass one of 6 positions as a prop: `top-left` (default), `top-center`, `top-right`, `bottom-left`, `bottom-center`, `bottom-right`.
When you want to send a toast, from wherever you like, import the `send_toast` function and execute it.
```typescript
import { send_toast } from "./Toast.svelte";
send_toast({
title: "Information",
description: "You can use this component in any Svelte project",
});
```
Pass the following options to this function:
- `title: string` (default: `""`)
- `description: string` (default: `""`)
- `variant: "info" | "success" | "error"` (default: `info`)
- `duration: number` (default: `3000`)
If you want to customize the Toasts, just edit the Svelte component `Toast.svelte` as you like.