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 Inputwhere
Self: 'static,
impl BaseComponent for Inputwhere
Self: 'static,
Sourceยงtype Properties = Props
type Properties = Props
The Componentโs Properties.
Sourceยงfn update(&mut self, _ctx: &Context<Self>, _msg: Self::Message) -> bool
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
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
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)
fn rendered(&mut self, _ctx: &Context<Self>, _first_render: bool)
Notified after a layout is rendered.
Sourceยงfn prepare_state(&self) -> Option<String>
fn prepare_state(&self) -> Option<String>
Prepares the server-side state.
Sourceยงimpl FunctionProvider for Input
impl FunctionProvider for Input
Sourceยงtype Properties = Props
type Properties = Props
Properties for the Function Component.
Sourceยงfn run(ctx: &mut HookContext, props: &Self::Properties) -> HtmlResult
fn run(ctx: &mut HookContext, props: &Self::Properties) -> HtmlResult
Auto Trait Implementationsยง
impl !Freeze for Input
impl !RefUnwindSafe for Input
impl !Send for Input
impl !Sync for Input
impl Unpin for Input
impl !UnwindSafe for Input
Blanket Implementationsยง
Sourceยงimpl<T> BorrowMut<T> for Twhere
T: ?Sized,
impl<T> BorrowMut<T> for Twhere
T: ?Sized,
Sourceยงfn borrow_mut(&mut self) -> &mut T
fn borrow_mut(&mut self) -> &mut T
Mutably borrows from an owned value. Read more
Sourceยงimpl<T> InitializeFromFunction<T> for T
impl<T> InitializeFromFunction<T> for T
Sourceยงfn initialize_from_function(f: fn() -> T) -> T
fn initialize_from_function(f: fn() -> T) -> T
Create an instance of this type from an initialization function
Sourceยงimpl<T> Instrument for T
impl<T> Instrument for T
Sourceยงfn instrument(self, span: Span) -> Instrumented<Self>
fn instrument(self, span: Span) -> Instrumented<Self>
Sourceยงfn in_current_span(self) -> Instrumented<Self>
fn in_current_span(self) -> Instrumented<Self>
Sourceยงimpl<T> IntoEither for T
impl<T> IntoEither for T
Sourceยงfn into_either(self, into_left: bool) -> Either<Self, Self>
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 moreSourceยงfn into_either_with<F>(self, into_left: F) -> Either<Self, Self>
fn into_either_with<F>(self, into_left: F) -> Either<Self, Self>
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 moreSourceยงimpl<T> IntoPropValue<Option<T>> for T
impl<T> IntoPropValue<Option<T>> for T
Sourceยงfn into_prop_value(self) -> Option<T>
fn into_prop_value(self) -> Option<T>
Convert
self
to a value of a Properties
struct.Sourceยงimpl<T> IntoPropValue<T> for T
impl<T> IntoPropValue<T> for T
Sourceยงfn into_prop_value(self) -> T
fn into_prop_value(self) -> T
Convert
self
to a value of a Properties
struct.Sourceยงimpl<Ret> SpawnIfAsync<(), Ret> for Ret
impl<Ret> SpawnIfAsync<(), Ret> for Ret
Sourceยงimpl<T> StorageAccess<T> for T
impl<T> StorageAccess<T> for T
Sourceยงfn as_borrowed(&self) -> &T
fn as_borrowed(&self) -> &T
Borrows the value.
Sourceยงfn into_taken(self) -> T
fn into_taken(self) -> T
Takes the value.
Sourceยงimpl<T, O> SuperFrom<T> for Owhere
O: From<T>,
impl<T, O> SuperFrom<T> for Owhere
O: From<T>,
Sourceยงfn super_from(input: T) -> O
fn super_from(input: T) -> O
Convert from a type to another type.
Sourceยงimpl<T, O, M> SuperInto<O, M> for Twhere
O: SuperFrom<T, M>,
impl<T, O, M> SuperInto<O, M> for Twhere
O: SuperFrom<T, M>,
Sourceยงfn super_into(self) -> O
fn super_into(self) -> O
Convert from a type to another type.