Struct Input

pub struct Input { /* private fields */ }

Available on crate feature yew only.

A custom input component that handles user input and validation.

Arguments

• props - The properties of the component.
  • valid_handle - A handle to track the validity of the input.
  • aria_invalid - A string representing the ‘aria-invalid’ attribute value for accessibility. Defaults to “true”.
  • aria_required - A string representing the ‘aria-required’ attribute value for accessibility. Defaults to “true”.
  • r#type - The type of the input element. Defaults to “text”.
  • r#ref - A reference to the input element.
  • handle - A handle to set the value of the input.
  • validate_function - A callback function to validate the input value.

Returns

(Html): An HTML representation of the input component.

Examples

use regex::Regex;
use serde::{Deserialize, Serialize};
use input_rs::yew::Input;
use yew::prelude::*;

#[derive(Debug, Default, Clone, Serialize, Deserialize)]
struct LoginUserSchema {
    email: String,
    password: String,
}

fn validate_email(email: String) -> bool {
    let pattern = Regex::new(r"^[^ ]+@[^ ]+\.[a-z]{2,3}$").unwrap();
    pattern.is_match(&email)
}

fn validate_password(password: String) -> bool {
    !&password.is_empty()
}

#[function_component(LoginFormOne)]
pub fn login_one() -> Html {
    let error_handle = use_state(String::default);
    let error = (*error_handle).clone();;

    let email_valid_handle = use_state(|| true);
    let email_valid = (*email_valid_handle).clone();;

    let password_valid_handle = use_state(|| true);
    let password_valid = (*password_valid_handle).clone();;

    let email_ref = use_node_ref();
    let email_handle = use_state(String::default);
    let email = (*email_handle).clone();;

    let password_ref = use_node_ref();
    let password_handle = use_state(String::default);
    let password = (*password_handle).clone();;

    let onsubmit = Callback::from(move |event: SubmitEvent| {
        event.prevent_default();

        let email_ref = password.clone();
        let password_ref = password.clone();
        let error_handle = error_handle.clone();

        // Custom logic for your endpoint goes here: `spawn_local`
    });

    html! {
        <div class="form-one-content" role="main" aria-label="Sign In Form">
          <div class="text">
            <h2>{"Sign In"}</h2>
            if !error.is_empty() {
              <div class="error">{error}</div>
            }
          </div>
          <form action="#" aria-label="Sign In Form" onsubmit={onsubmit}>
              <Input
                r#type={"text"}
                handle={email_handle}
                name={"email"}
                r#ref={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}
              />
              <Input
                r#type={"password"}
                handle={password_handle}
                name={"password"}
                r#ref={password_ref}
                placeholder={"Password"}
                icon_class={"fas fa-lock"}
                error_message={"Password can't be blank!"}
                field_class={"form-one-field"}
                error_class={"error-txt"}
                required={true}
                valid_handle={password_valid_handle}
                validate_function={validate_password}
                eye_active={"fa fa-eye"}
                eye_disabled={"fa fa-eye-slash"}
              />
            <div class="form-one-forgot-pass">
              <a href="#" aria-label="Forgot Password?">{"Forgot Password?"}</a>
            </div>
            <button type="submit">{"Sign in"}</button>
            <div class="sign-up">
              {"Not a member?"}
              <a href="#" aria-label="Sign up now">{"Sign up now"}</a>
            </div>
          </form>
        </div>
    }
}

Trait Implementations

impl BaseComponent for Input

where Self: 'static,

type Message = ()

The Component’s Message.

type Properties = Props

The Component’s Properties.

fn create(ctx: &Context<Self>) -> Self

Creates a component.

fn update(&mut self, _ctx: &Context<Self>, _msg: Self::Message) -> bool

Updates component’s internal state.

fn changed( &mut self, _ctx: &Context<Self>, _old_props: &Self::Properties, ) -> bool

React to changes of component properties.

fn view(&self, ctx: &Context<Self>) -> HtmlResult

Returns a component layout to be rendered.

fn rendered(&mut self, _ctx: &Context<Self>, _first_render: bool)

Notified after a layout is rendered.

fn destroy(&mut self, _ctx: &Context<Self>)

Notified before a component is destroyed.

fn prepare_state(&self) -> Option<String>

Prepares the server-side state.

impl Debug for Input

fn fmt(&self, f: &mut Formatter<'_>) -> Result

Formats the value using the given formatter.

impl FunctionProvider for Input

type Properties = Props

Properties for the Function Component.

fn run(ctx: &mut HookContext, props: &Self::Properties) -> HtmlResult

Render the component. This function returns the Html to be rendered for the component.