Struct input_yew::CustomInput

pub struct CustomInput { /* private fields */ }

custom_input_component A custom input component that handles user input and validation.

Arguments

• props - The properties of the component.
  • input_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”.
  • input_type - The type of the input element. Defaults to “text”.
  • input_ref - A reference to the input element.
  • input_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

// Example of using the custom_input_component
use yew::prelude::*;
use input_yew::CustomInput;

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}>
              <CustomInput
                input_type={Some("text".to_string())}
                label={"".to_string()}
                input_handle={input_email_handle}
                name={"email".to_string()}
                input_ref={input_email_ref}
                input_placeholder={"Email".to_string()}
                icon_class={"fas fa-user".to_string()}
                icon={"fas fa-user".to_string()}
                error_message={"Enter a valid email address".to_string()}
                form_input_class={"".to_string()}
                form_input_field_class={"form-one-field".to_string()}
                form_input_label_class={"".to_string()}
                form_input_input_class={"".to_string()}
                form_input_error_class={"error-txt".to_string()}
                required={true}
                input_valid_handle={email_valid_handle}
                validate_function={validate_email}
              />
          </form>
    }
}

Trait Implementations

impl BaseComponent for CustomInputwhere 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 CustomInput

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

Formats the value using the given formatter.

impl FunctionProvider for CustomInput

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.