⚠️ Yew Alert

📜 Introduction

Yew Alert is a simple yet flexible alert component for the Yew framework, designed to provide customizable and responsive alerts to enhance user interaction.

🤔 Why is this Component Useful?

The Alert component offers several benefits to improve your web application:

1. ⚙️ Customization: Tailor the appearance and behavior of alerts based on your application's design and requirements.

2. 🚀 Responsive Design: Ensures optimal display and interaction across various devices and screen sizes.

3. 💬 Easy Integration: Seamlessly integrate alerts into Yew projects with minimal setup and configuration.

⚙️ Installation

Integrating Yew Alert into your Yew project is straightforward. Follow these steps:

1. Make sure you have Yew set up in your project. If not, refer to the Yew documentation for installation instructions.

2. Install the library using your preferred package manager:

   $ cargo add yew-alert
   

3. Start using the Alert component to enhance your application's user feedback.

🛠️ Usage

Incorporating Yew Alert into your application is easy. Follow these steps:

1. Import the Alert component into your Yew project:

   use yew::prelude::*;
   use yew_alert::Alert;
   

2. Define the alert properties and use the Alert component in your Yew component:

   #[function_component(App)]
   pub fn app() -> Html {
       let show_alert = use_state(|| true);
       html! {
           <Alert
               message={"This is an alert message"}
               show_alert={show_alert}
               timeout={2500}
               title={"Alert Title"}
               alert_class={"w-96 h-48 text-white"}
               icon_class={"flex justify-center"}
               confirm_button_text={"Okay"}
               cancel_button_text={"Cancel"}
               confirm_button_class={"bg-green-500 text-white rounded"}
               cancel_button_class={"bg-red-500 text-white rounded"}
               show_confirm_button={true}
               show_cancel_button={true}
               show_close_button={true}
               on_confirm={Callback::noop()}
               on_cancel={Callback::noop()}
               position={"top-right"}
               container_class={"flex items-center text-center justify-center bg-gray-800 text-white border border-gray-600"}
               title_class={"dark:text-white"}
               message_class={"dark:text-gray-300"}
               icon_type={"success"}
               icon_color={""}
               icon_width={"50"}
           />
       }
   }
   

3. Customize the Alert appearance and behavior using provided props.

4. Enjoy enhanced user feedback with Yew Alert.

🔧 Props

Main Props

Style and Layout Props

Button Props

Positioning and Layout Props

Icon Props

📙 Examples

Explore different styling and features in the examples folder.

🤝 Contribution

We welcome contributions from the community to enhance this component. Feel free to open issues, submit pull requests, or provide feedback. Let's collaborate to make user interaction in Yew even more dynamic and user-friendly!

📜 License

Yew Alert is licensed under the MIT License, allowing you to use, modify, and distribute it freely. Refer to the LICENSE file for more details.