Struct Input

Source
pub struct Input { /* private fields */ }
Available on crate feature yew only.
Expand description

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ยง

Sourceยง

impl BaseComponent for Input
where Self: 'static,

Sourceยง

type Message = ()

The Componentโ€™s Message.
Sourceยง

type Properties = Props

The Componentโ€™s Properties.
Sourceยง

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

Creates a component.
Sourceยง

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

Updates componentโ€™s internal state.
Sourceยง

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

React to changes of component properties.
Sourceยง

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

Returns a component layout to be rendered.
Sourceยง

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

Notified after a layout is rendered.
Sourceยง

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

Notified before a component is destroyed.
Sourceยง

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

Prepares the server-side state.
Sourceยง

impl Debug for Input

Sourceยง

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

Formats the value using the given formatter. Read more
Sourceยง

impl FunctionProvider for Input

Sourceยง

type Properties = Props

Properties for the Function Component.
Sourceยง

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

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

Auto Trait Implementationsยง

Blanket Implementationsยง

Sourceยง

impl<T> Any for T
where T: 'static + ?Sized,

Sourceยง

fn type_id(&self) -> TypeId

Gets the TypeId of self. Read more
Sourceยง

impl<T> Borrow<T> for T
where T: ?Sized,

Sourceยง

fn borrow(&self) -> &T

Immutably borrows from an owned value. Read more
Sourceยง

impl<T> BorrowMut<T> for T
where T: ?Sized,

Sourceยง

fn borrow_mut(&mut self) -> &mut T

Mutably borrows from an owned value. Read more
Sourceยง

impl<T> From<T> for T

Sourceยง

fn from(t: T) -> T

Returns the argument unchanged.

Sourceยง

impl<T> InitializeFromFunction<T> for T

Sourceยง

fn initialize_from_function(f: fn() -> T) -> T

Create an instance of this type from an initialization function
Sourceยง

impl<T> Instrument for T

Sourceยง

fn instrument(self, span: Span) -> Instrumented<Self>

Instruments this type with the provided Span, returning an Instrumented wrapper. Read more
Sourceยง

fn in_current_span(self) -> Instrumented<Self>

Instruments this type with the current Span, returning an Instrumented wrapper. Read more
Sourceยง

impl<T, U> Into<U> for T
where U: From<T>,

Sourceยง

fn into(self) -> U

Calls U::from(self).

That is, this conversion is whatever the implementation of From<T> for U chooses to do.

Sourceยง

impl<T> IntoEither for T

Sourceยง

fn into_either(self, into_left: bool) -> Either<Self, Self>

Converts self into a Left variant of Either<Self, Self> if into_left is true. Converts self into a Right variant of Either<Self, Self> otherwise. Read more
Sourceยง

fn into_either_with<F>(self, into_left: F) -> Either<Self, Self>
where F: FnOnce(&Self) -> bool,

Converts self into a Left variant of Either<Self, Self> if into_left(&self) returns true. Converts self into a Right variant of Either<Self, Self> otherwise. Read more
Sourceยง

impl<T> IntoPropValue<Option<T>> for T

Sourceยง

fn into_prop_value(self) -> Option<T>

Convert self to a value of a Properties struct.
Sourceยง

impl<T> IntoPropValue<T> for T

Sourceยง

fn into_prop_value(self) -> T

Convert self to a value of a Properties struct.
Sourceยง

impl<T> Same for T

Sourceยง

type Output = T

Should always be Self
Sourceยง

impl<Ret> SpawnIfAsync<(), Ret> for Ret

Sourceยง

fn spawn(self) -> Ret

Spawn the value into the dioxus runtime if it is an async block
Sourceยง

impl<T> StorageAccess<T> for T

Sourceยง

fn as_borrowed(&self) -> &T

Borrows the value.
Sourceยง

fn into_taken(self) -> T

Takes the value.
Sourceยง

impl<T, O> SuperFrom<T> for O
where O: From<T>,

Sourceยง

fn super_from(input: T) -> O

Convert from a type to another type.
Sourceยง

impl<T, O, M> SuperInto<O, M> for T
where O: SuperFrom<T, M>,

Sourceยง

fn super_into(self) -> O

Convert from a type to another type.
Sourceยง

impl<T, U> TryFrom<U> for T
where U: Into<T>,

Sourceยง

type Error = Infallible

The type returned in the event of a conversion error.
Sourceยง

fn try_from(value: U) -> Result<T, <T as TryFrom<U>>::Error>

Performs the conversion.
Sourceยง

impl<T, U> TryInto<U> for T
where U: TryFrom<T>,

Sourceยง

type Error = <U as TryFrom<T>>::Error

The type returned in the event of a conversion error.
Sourceยง

fn try_into(self) -> Result<U, <U as TryFrom<T>>::Error>

Performs the conversion.
Sourceยง

impl<V, T> VZip<V> for T
where V: MultiLane<T>,

Sourceยง

fn vzip(self) -> V

Sourceยง

impl<T> WithSubscriber for T

Sourceยง

fn with_subscriber<S>(self, subscriber: S) -> WithDispatch<Self>
where S: Into<Dispatch>,

Attaches the provided Subscriber to this type, returning a WithDispatch wrapper. Read more
Sourceยง

fn with_current_subscriber(self) -> WithDispatch<Self>

Attaches the current default Subscriber to this type, returning a WithDispatch wrapper. Read more
Sourceยง

impl<Token, Builder, How> AllPropsFor<Builder, How> for Token
where Builder: Buildable<Token>, <Builder as Buildable<Token>>::WrappedToken: HasAllProps<<Builder as Buildable<Token>>::Output, How>,

Sourceยง

impl<T> ErasedDestructor for T
where T: 'static,

Sourceยง

impl<T> HasAllProps<(), T> for T

Sourceยง

impl<T> MaybeSendSync for T