Crate yew_html_attributes

source ·
Expand description

Yew html attributes

Yew html attributes is a macro crate that allow you to easily add standard html attributes to your component and to then pass them to a child.

Usage :

To add the html attributes to your props just add the #[has_html_attributes] before your props and derive HasHtmlAttributes.

To then pass them along use the use_attributes! macro with a reference to the child html element and the props refererence.

use yew::prelude::*;
use yew_attributes_macro::prelude::*;

#[has_html_attributes]
#[derive(Debug, Clone, PartialEq, Default, Properties, HasHtmlAttributes)]
pub struct InputProps{}

#[function_component(Input)]
pub fn input(props:&InputProps) -> Html {
  let node_ref = use_node_ref();

  use_attributes!(node_ref, props);

  html! {
      <>
          <input ref={node_ref} type="text" />
      </>
  }
}

The element parameters

By default the macro only adds the attributes common to all html element. If you want element to recieve all it’s associated attributes provide the element parameter in has_html_attributes

use yew::prelude::*;
use yew_attributes_macro::prelude::*;

#[has_html_attributes(element=input)]
#[derive(Debug, Clone, PartialEq, Default, Properties, HasHtmlAttributes)]
pub struct InputProps{}

#[function_component(Input)]
pub fn input(props:&InputProps) -> Html {
  let node_ref = use_node_ref();

  use_attributes!(node_ref, props);

  html! {
      <>
          <input ref={node_ref} type="text" />
      </>
  }
}

The exclude parameter

You might want some to remove some attributes to avoid overwritting some of your component internal logic. To do so you have to add the exclude parameter to the has_html_attributes with a list of all the attributes you want to exclude

use yew::prelude::*;
use yew_attributes_macro::prelude::*;

#[has_html_attributes(exclude="oninput,onclick")]
#[derive(Debug, Clone, PartialEq, Default, Properties, HasHtmlAt    Finished dev [unoptimized + debuginfo] target(s) in 1.76stributes)]
pub struct InputProps{}

#[function_component(Input)]
pub fn input(props:&InputProps) -> Html {
  let node_ref = use_node_ref();

  use_attributes!(node_ref, props);

  html! {
      <>
          <input ref={node_ref} type="text" />
      </>
  }
}

The invisible parameter

By default the macro add the attributes common to visible html elements. If you want to only have the attributes common to all html element use the invisible parameter

use yew::prelude::*;
use yew_attributes_macro::prelude::*;

#[has_html_attributes(invisible=false)]
#[derive(Debug, Clone, PartialEq, Default, Properties, HasHtmlAttributes)]
pub struct ScriptProps{}

#[function_component(Script)]
pub fn script(props:&ScriptProps) -> Html {
  let node_ref = use_node_ref();

  use_attributes!(node_ref, props);

  html! {
      <>
          <script ref={node_ref} />
      </>
  }
}

Modules

  • prelude
    The module that expopse everything you need to use the crate

Macros

  • use_attributes
    The proc macro that use the yew_html_attribute::HasHtmlAttributes trait to set and unset the attributes on the html element. It expect to be used on a struct that derive the yew::Properties trait and the yew_html_attribute::HasHtmlAttributes trait.

Traits

  • HasHtmlAttributes
    This trait is used internaly by the use_attributes macro to set and unset the attributes on the html element.

Attribute Macros

  • has_html_attributes
    The attribute macro that add the fields to your props struct. It expect to be used on a struct that derive the yew::Properties trait and the yew_html_attribute::HasHtmlAttributes trait.

Derive Macros