# 💡 Input Yew > ⚠️ **Warning**: This crate has been moved to [`input-rs`](https://crates.io/crates/input-rs). > Please use [`input-rs`](https://crates.io/crates/input-rs) instead of `input_yew`. [![Crates.io](https://img.shields.io/crates/v/input_yew)](https://crates.io/crates/input_yew) [![Crates.io Downloads](https://img.shields.io/crates/d/input_yew)](https://crates.io/crates/input_yew) ![Crates.io License](https://img.shields.io/crates/l/input_yew) ![Rust](https://img.shields.io/badge/rust-stable-orange) ![logo](./assets/logo.png) ## 🎬 Demo | Input Type | Demo | | --- | --- | | Text | ![text-demo](./assets/text-demo.gif) | | Password | ![pass-demo](./assets/pass-demo.gif) | | Textarea | ![textarea-demo](./assets/textarea-demo.gif) | | Telephone | ![tel-demo](./assets/tel-demo.gif) | ## 📜 Prologue This custom reusable input functional component is a solution built exclusively for the Rust Yew framework. Seamlessly integrating into your Yew applications, it combines powerful functionality with comprehensive accessibility features. With a focus on reusability and customizability, this component empowers you to effortlessly create dynamic input fields that adapt to various forms of user input. ## 🤔 Why is this Component Useful? The Yew Custom Reusable Input Component is a powerful tool designed to make your life as a Yew developer easier and more enjoyable. Let's explore some of the reasons why this component is an essential addition to your web development arsenal: 1. 🔄 Reusability: No repetitive code! This component is built to be highly reusable, allowing you to sprinkle it across your application without any fuss. 1. 🎨 Customizability: You can now fine-tune the appearance and behavior of the input component to fit your specific needs and aesthetics. 1. ✔️ Validations: You can easily add your custom validation functions. 1. 🎫 Event Handling: The component exposes the `oninput` event handler, making it super easy to implement dynamic behavior based on your interactions. 1. ♿ Accessibility: This component was designed with accessibility in mind, ensuring that it's user-friendly and perceivable by all, regardless of ability. 1. ❌ Error Handling: When users provide invalid input, the component gracefully displays clear error messages, guiding them towards valid data entry and enhancing the overall user experience. ## ⚙️ Installation You can quickly integrate the Yew Custom Reusable Input Component into your Yew project by following these simple steps: 1. First, make sure you have Yew set up in your project. If not, check out the [Yew documentation](https://yew.rs/docs/getting-started/introduction) for installation instructions. 2. Then, install the input component package using your preferred package manager: ```bash $ cargo add input_yew ``` 3. Finally, import the component into your Yew application and start using it to power up your forms and user interactions. ## 🛠️ Usage Using this custom reusable input component is a breeze! Simply follow these steps: 1. Import the component into your Yew application: ```rust // Add these lines at the beginning of your file, make sure you have `regex` installed for input validation. use yew::prelude::*; use regex::Regex; use input_yew::CustomInput; ``` 1. Use the `CustomInput` component wherever you need an input field: ```rust fn validate_email(email: String) -> bool { let pattern = Regex::new(r"^[^ ]+@[^ ]+\.[a-z]{2,3}$").unwrap(); pattern.is_match(&email) } #[function_component(LoginForm)] pub fn login_form() -> Html { let input_email_ref = use_node_ref(); let input_email_handle = use_state(String::default); let email_valid_handle = use_state(|| true); let onsubmit = Callback::from(move |event: SubmitEvent| {}; html! {
} } ``` 1. Customize the input component's appearance and behavior according to your project requirements. ## 🔧 Props ### Input Properties | Name | Type | Description | Example | Default Value | | --- | --- | --- | --- | --- | | input_type | &'static str | The type of the input. | "text", "password", "tel, "textarea", "date". | "text" | | label | &'static str | The label to be displayed for the input field. | "Username", "Email". | "" | | name | &'static str | The name of the input field, used for form submission and accessibility. | "username", "email". | "" | | required | bool | Indicates whether the input is required or not. | true, false. | false | | input_ref | NodeRef | A reference to the DOM node of the input element. | `use_node_ref()`, | - | | error_message | &'static str | The error message to display when there is a validation error. | "Invalid input", "Field is required". | "" | ### Styling Properties | Name | Type | Description | Example | Default Value | | --- | --- | --- | --- | --- | | form_input_class | &'static str | The CSS class to be applied to all inner elements. | "form-input-container", "input-group". | "" | | form_input_field_class | &'static str | The CSS class to be applied to the inner input element and icon. | "form-input-field", "input-icon". | "" | | form_input_label_class | &'static str | The CSS class to be applied to the label for the input element. | "form-input-label". | "" | | form_input_input_class | &'static str | The CSS class to be applied to the input element. | "custom-input". | "" | | form_input_error_class | &'static str | The CSS class to be applied to the error div element. | "input-error-message". | "" | | icon_class | &'static str | The CSS class to be applied to the start icon element. | "input-icon". | "" | ### State and Callback Properties | Name | Type | Description | Example | Default Value | | --- | --- | --- | --- | --- | | input_handle | UseStateHandle