Leptoaster

Leptoaster is a minimal toast library for Leptos. It provides a simple interface to show toast messages to the user.

Demo

Take a look at the demo here.

Getting started

Assuming you already have Leptos installed, install Leptoaster

cargo add leptoaster

Once, installed, provide the toaster in the root component of your application and add the Toaster component.

use leptos::*;
use leptoaster::*;

#[component]
fn App() -> IntoView {
    provide_toaster();

    view! {
        <Toaster />
        // your other components
    }
}

The Toaster component takes an optional bool property, stacked which defines whether or not the toasts should be stacked.

use leptos::*;
use leptoaster::*;

#[component]
fn App() -> IntoView {
    provide_toaster();

    view! {
        <Toaster stacked={true} />
        // your other components
    }
}

To create a toast message in any component, simple use expect_toaster().

use lepto::*;
use leptoaster::*;

#[component]
fn MyComponent() -> IntoView {
    let toaster = expect_toaster();

    toaster.success("A toast message should appear!");
}

That's it! You can now show toast messages in your UI!

The toaster exposes a number of different kinds of toasts:

• info
• success
• warn
• error

For more customization, use the toast function along with the ToastBuilder:

toaster.toast(
    ToastBuilder::new("My toast message goes here.")
        .with_level(ToastLevel::Success) // set the toast level (default is `ToastLevel::Info`)
        .with_dismissable(false) // allow or disallow the toast from being dismissable (default is `true`)
        .with_expiry(Some(3_000)) // expiry in milliseconds (default is `2500`)
        .with_progress(false) // enable or disable the progress bar (default is `true`)
        .with_position(ToastPosition::TopRight) // set the toast position (default is 'ToastPosition::BottomLeft`)
);

The toaster also allows you to clear all toasts currently visible on the screen, including non-expiring toasts:

#[component]
fn MyComponent() -> IntoView {
    let toaster = expect_toaster();

    toaster.clear();
}

Styling

To customize styling, override any of the following CSS variables:

--leptoaster-width
--leptoaster-max-width
--leptoaster-z-index

--leptoaster-font-family
--leptoaster-font-size
--leptoaster-line-height
--leptoaster-font-weight

--leptoaster-progress-height

--leptoaster-info-background-color
--leptoaster-info-border-color
--leptoaster-info-text-color

--leptoaster-success-background-color
--leptoaster-success-border-color
--leptoaster-success-text-color

--leptoaster-warn-background-color
--leptoaster-warn-border-color
--leptoaster-warn-text-color

--leptoaster-error-background-color
--leptoaster-error-border-color
--leptoaster-error-text-color