yew-toastify

Toast/notification components library for Yew. Like react-toastify but for Yew with flexible CSS framework support.

Features

• Portal-based rendering - Toasts render at document body level
• External state management - Manage toasts from anywhere using shared state
• Flexible styling - Works with Tailwind, Bulma, Bootstrap, or custom CSS
• 6 position options - Top/Bottom + Left/Center/Right
• Hover to pause - Hovering pauses the auto-dismiss timer
• Click to dismiss - Click any toast to close it immediately

Installation

# Cargo.toml

# With standard toast components (recommended)
yew-toastify = { version = "0.3", features = ["standard-notification"] }

# For custom toast implementations only
yew-toastify = "0.3"

Quick Start

use yew_toastify::{
    use_notification, Notification, NotificationFactory, NotificationType,
    NotificationsPosition, NotificationsProvider, NotificationStyle,
};

// 1. Wrap your app with NotificationsProvider
#[function_component(App)]
fn app() -> Html {
    let component_creator = NotificationFactory;
    
    html! {
        <NotificationsProvider<Notification, NotificationFactory>
            {component_creator}
            position={NotificationsPosition::BottomRight}
            style={NotificationStyle::default()}
        >
            <MyApp />
        </NotificationsProvider<Notification, NotificationFactory>>
    }
}

// 2. Spawn toasts from any component
#[function_component(MyApp)]
fn my_app() -> Html {
    let toasts = use_notification::<Notification>();
    
    let on_click = {
        let toasts = toasts.clone();
        Callback::from(move |_| {
            toasts.spawn(Notification::new(
                NotificationType::Success,
                "Success!",
                "Operation completed.",
                Duration::seconds(5),
            ));
        })
    };
    
    html! { <button onclick={on_click}>{"Show Toast"}</button> }
}

Customization

Using Different CSS Frameworks

NotificationStyle lets you customize all CSS classes. Here's how to use Bulma:

let bulma_style = NotificationStyle::default()
    .with_container("notification")
    .with_info("is-info")
    .with_warn("is-warning")
    .with_error("is-danger")
    .with_success("is-success")
    .with_title("title")
    .with_text("subtitle");

Position Options

NotificationsPosition::TopLeft
NotificationsPosition::TopCenter
NotificationsPosition::TopRight
NotificationsPosition::BottomLeft
NotificationsPosition::BottomCenter
NotificationsPosition::BottomRight
NotificationsPosition::Custom("your-custom-classes".into())

Examples

See the examples directory for working code examples:

• Basic Example - Default implementation with Tailwind CSS
• Bulma Example - Custom components with Bulma CSS framework

For detailed descriptions and run instructions, see the Examples README.

License

Distributed under the MIT license.