🎬 Demo

Input Type	Demo
Text
Password
Textarea
Telephone

📜 Intro

A reusable input component built for WASM frameworks like Yew, Dioxus, and Leptos. It's customizable, accessible, and designed to simplify creating dynamic input fields in your applications.

🤔 Why Use It?

1. 🔄 Reusable: Write once, use anywhere in your app.
2. 🎨 Customizable: Easily adjust styles and behavior to fit your needs.
3. ✔️ Validations: Add custom validation functions effortlessly.
4. 🎫 Event Handling: Supports oninput, onchange, etc events for dynamic interactions.
5. ♿ Accessible: User-friendly and built for inclusivity.
6. ❌ Error Handling: Displays clear error messages for invalid input.

⚙️ Yew Installation

You can quickly integrate this 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 for installation instructions.

2. Then, install the input component package using your preferred package manager:

   $ cargo add input-rs --features=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:

   // 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_rs::yew::Input;
   

2. Use the Input component wherever you need an input field:

   use yew::prelude::*;
   use regex::Regex;
   use input_rs::yew::Input;
   
   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! {
             <form action="#" aria-label="Sign In Form" onsubmit={onsubmit}>
                 <Input
                   r#type={"text"}
                   handle={input_email_handle}
                   name={"email"}
                   r#ref={input_email_ref}
                   placeholder={"Email"}
                   icon_class={"fas fa-user"}
                   error_message={"Enter a valid email address"}
                   field_class={"form-one-field"}
                   error_class={"error-txt"}
                   required={true}
                   valid_handle={email_valid_handle}
                   validate_function={validate_email}
                 />
             </form>
       }
   }
   

3. Customize the input component's appearance and behavior according to your project requirements.

🔧 Props

🖊️ Input Properties

🎨 Styling Properties

+-----------------------------+  <-- `class`
|                             |
|  +-----------------------+  |  <-- `label_class`
|  |       Label           |  |
|  +-----------------------+  |
|                             |
|  +-----------------------+  |  <-- `field_class`
|  | +-------+  +--------+ |  |
|  | | Input |  |  Icon  | |  |  <-- `input_class` and `icon_class`
|  | +-------+  +--------+ |  |
|  +-----------------------+  |
|                             |
|  +-----------------------+  |  <-- `error_class` (if invalid)
|  |       Error Message   |  |
|  +-----------------------+  |
+-----------------------------+

🧠 State and Callback Properties

👁️ Password Icon Properties

♿ Accessibility and SEO Properties

🖼️ Image and Media Properties

⏱️ Date and Number Input Properties

📂 File Input Properties

📙 Examples

Lots of examples we built use it to create even more sophisticated forms like Contact Us forms, multi-step forms, and login forms. If you're curious about how to use it, you can check out the examples folder for more information.

🤝 Contribution

We welcome contributions from the community to make this input component even better! Feel free to open issues, submit pull requests, or provide feedback. Let's collaborate and create something amazing together!

📜 License

This input component is licensed under the Apache-2.0 License, giving you the freedom to use, modify, and distribute it as you see fit. Please check the LICENSE file for more details.