svelte-toasts is yet another toast library for Svelte, written with Typescript, TailwindCSS, and formatted with Prettier.
View the demo.
TODO: Installation
Import the ToastWrapper
component, with optional position
, toastDefaults
and animationDefaults
.
<script lang="ts">
import { AnimationOptions, Position, ToastOptions, ToastWrapper } from '';
const toastDefaults: ToastOptions = {
...
};
const animationDefaults: AnimationOptions = {
...
};
</script>
...
<ToastWrapper position="end" {toastDefaults} {animationDefaults} />
Import the toasts
store and push as much toast as you desire.
<script lang="ts">
import { toasts } from '';
toasts.push('Toast Me!');
</script>
/**
* Remove all toasts from the store. Sets the fade transition duration to 0 beforehand, to ensure toasts
* are cleared instantly after awaiting 'tick'.
*/
const clear = async () => { ... }
/**
* Removes a toast from the store based on the given {@link id}. This can relate to the id number of
* a toast or {@link ToastPop}. 'new' removes the latest toast, whereas 'old' removes the oldest.
* @param {number | ToastPop} id The id of the toast to remove, or either 'new' or 'old'.
*/
const pop = (id: number | ToastPop) => { ... }
/**
* Push a new toast to the store.
* @param {string} message The message for the toast to display.
* @param {ToastOptions} opts (optional)
* @returns {number} Id of the toast.
*/
const push = (message: string, opts?: ToastOptions): number => { ... }
toasts.push('...', {
auto: boolean;
border: 'bottom' | 'end' | 'start' | 'top' | 'all';
duration: number;
icon: boolean,
pausable: boolean,
type: 'error' | 'info' | 'success' | 'warning';
});
duration
has elapsed.true
start
auto
.3000
type
.true
duration
is able to be paused by mouse hover.true
icon
and border
colour.info
If you want to stick to a style and would prefer to not give ToastOptions
every time you push a toast, defaults can instead be set on the ToastWrapper
.
const toastDefaults: ToastOptions = {
...
};
const animationDefaults: AnimationOptions = {
fade: {}, // FadeParams
flip: {}, // FlipParams
fly: {} // FlyParams
};
<ToastWrapper position={'bottom' | 'end' | 'start' | 'top'} {animationDefaults} {toastDefaults} />
as above.
{ duration: 400 }
{ duration: 400 }
{ duration: 400 }