Skip to main content
Version: 0.18.0

Elements

DOM nodes#

There are many reasons why you might want to create or manage DOM nodes manually in Yew, such as when integrating with JS libraries that can cause conflicts with managed components.

Using web-sys, you can create DOM elements and convert them into a Node - which can then be used as a Html value using VRef:

    // ...    fn view(&self) -> Html {        use yew::{utils::document, web_sys::{Element, Node}};
        // Create a div element from the document        let div: Element = document().create_element("div").unwrap();        // Add content, classes etc.        div.set_inner_html("Hello, World!");        // Convert Element into a Node        let node: Node = div.into();        // Return that Node as a Html value        Html::VRef(node)    }

Dynamic tag names#

When building a higher-order component you might find yourself in a situation where the element's tag name isn't static. For example, you might have a Title component which can render anything from h1 to h6 depending on a level prop. Instead of having to use a big match expression, Yew allows you to set the tag name dynamically using @{name} where name can be any expression that returns a string.

let level = 5;let text = "Hello World!".to_owned()
html! {    <@{format!("h{}", level)} class="title">{ text }</@>}

Boolean Attributes#

Some content attributes (e.g checked, hidden, required) are called boolean attributes. In Yew, boolean attributes need to be set to a bool value:

    html! {        <div hidden=true>            { "This div is hidden." }        </div>    }

This will result in HTML that's functionally equivalent to this:

    <div hidden>This div is hidden.</div>

Setting a boolean attribute to false is equivalent to not using the attribute at all; values from boolean expressions can be used:

    let no = 1 + 1 != 2;
    html! {        <div hidden=no>            { "This div is NOT hidden." }        </div>    }

This will result in the following HTML:

    <div>This div is NOT hidden.</div>

Optional attributes for HTML elements#

Most HTML attributes can use optional values (Some(x) or None). This allows us to omit the attribute if the attribute is marked as optional.

let maybe_id = Some("foobar");
html! {    <div id=maybe_id></div>}

If the attribute is set to None, the attribute won't be set in the DOM.

Please note that it is also valid to give only the value as properties behave like Into<Option<T>>:

let id = "foobar";
html! {    <div id=id></div>}

Listeners#

Listener attributes need to be passed a Callback which is a wrapper around a closure. How you create your callback depends on how you wish your app to react to a listener event:

struct MyComponent {    link: ComponentLink<Self>,}
enum Msg {    Click,}
impl Component for MyComponent {    type Message = Msg;    type Properties = ();
    fn create(_: Self::Properties, link: ComponentLink<Self>) -> Self {        MyComponent { link }    }
    fn update(&mut self, msg: Self::Message) -> ShouldRender {        match msg {            Msg::Click => {                // Handle Click            }        }    }
    fn view(&self) -> Html {        // Create a callback from a component link to handle it in a component        let click_callback = self.link.callback(|_: ClickEvent| Msg::Click);        html! {            <button onclick=click_callback>                { "Click me!" }            </button>        }    }}
struct MyComponent {    worker: Dispatcher<MyWorker>,}
impl Component for MyComponent {    type Message = ();    type Properties = ();
    fn create(_: Self::Properties, _: ComponentLink<Self>) -> Self {        MyComponent {            worker: MyWorker::dispatcher()        }    }
    fn update(&mut self, _: Self::Message) -> ShouldRender {        false    }
    fn view(&self) -> Html {        // Create a callback from a worker to handle it in another context        let click_callback = self.worker.callback(|_: ClickEvent| WorkerMsg::Process);        html! {            <button onclick=click_callback>                { "Click me!" }            </button>        }    }}
struct MyComponent;
impl Component for MyComponent {    type Message = ();    type Properties = ();
    fn create(_: Self::Properties, _: ComponentLink<Self>) -> Self {        MyComponent    }
    fn update(&mut self, _: Self::Message) -> ShouldRender {        false    }
    fn view(&self) -> Html {        // Create an ephemeral callback        let click_callback = Callback::from(|| {            ConsoleService::new().log("clicked!");        });
        html! {            <button onclick=click_callback>                { "Click me!" }            </button>        }    }}

Event Types#

In the following table web-sys's event types should only be used if you're using yew with web-sys (this is enabled by default). Use stdweb's event types if you're using the yew-stdweb crate. See the documentation page about whether to choose web-sys or stdweb for more information.

tip

All the event types mentioned in the following table are re-exported under yew::events. Using the types from yew::events makes it easier to ensure version compatibility than if you were to manually include web-sys or stdweb as dependencies in your crate because you won't end up using a version which conflicts with the version Yew specifies.

Event nameweb_sys Event Typestdweb Event Type
onabortEventResourceAbortEvent
onauxclickMouseEventAuxClickEvent
onblurFocusEventBlurEvent
oncancelEventUnsupported
oncanplayEventUnsupported
oncanplaythroughEventUnsupported
onchangeChangeDataChangeData
onclickMouseEventClickEvent
oncloseEventUnsupported
oncontextmenuMouseEventContextMenuEvent
oncuechangeEventUnsupported
ondblclickMouseEventDoubleClickEvent
ondragDragEventDragEvent
ondragendDragEventDragEndEvent
ondragenterDragEventDragEnterEvent
ondragexitDragEventDragExitEvent
ondragleaveDragEventDragLeaveEvent
ondragoverDragEventDragOverEvent
ondragstartDragEventDragStartEvent
ondropDragEventDragDropEvent
ondurationchangeEventUnsupported
onemptiedEventUnsupported
onendedEventUnsupported
onerrorEventResourceErrorEvent
onfocusFocusEventFocusEvent
onformdataEventUnsupported
oninputInputDataInputData
oninvalidEventUnsupported
onkeydownKeyboardEventKeyDownEvent
onkeypressKeyboardEventKeyPressEvent
onkeyupKeyboardEventKeyUpEvent
onloadEventResourceLoadEvent
onloadeddataEventUnsupported
onloadedmetadataEventUnsupported
onloadstartProgressEventLoadStartEvent
onmousedownMouseEventMouseDownEvent
onmouseenterMouseEventMouseEnterEvent
onmouseleaveMouseEventMouseLeaveEvent
onmousemoveMouseEventMouseMoveEvent
onmouseoutMouseEventMouseOutEvent
onmouseoverMouseEventMouseOverEvent
onmouseupMouseEventMouseUpEvent
onpauseEventUnsupported
onplayEventUnsupported
onplayingEventUnsupported
onprogressProgressEventProgressEvent
onratechangeEventUnsupported
onresetEventUnsupported
onresizeEventResizeEvent
onscrollEventScrollEvent
onsecuritypolicyviolationEventUnsupported
onseekedEventUnsupported
onseekingEventUnsupported
onselectEventUnsupported
onslotchangeEventSlotChangeEvent
onstalledEventUnsupported
onsubmitFocusEventSubmitEvent
onsuspendEventUnsupported
ontimeupdateEventUnsupported
ontoggleEventUnsupported
onvolumechangeEventUnsupported
onwaitingEventUnsupported
onwheelWheelEventMouseWheelEvent
oncopyEventUnsupported
oncutEventUnsupported
onpasteEventUnsupported
onanimationcancelAnimationEventUnsupported
onanimationendAnimationEventUnsupported
onanimationiterationAnimationEventUnsupported
onanimationstartAnimationEventUnsupported
ongotpointercapturePointerEventGotPointerCaptureEvent
onloadendProgressEventLoadEndEvent
onlostpointercapturePointerEventLostPointerCaptureEvent
onpointercancelPointerEventPointerCancelEvent
onpointerdownPointerEventPointerDownEvent
onpointerenterPointerEventPointerEnterEvent
onpointerleavePointerEventPointerLeaveEvent
onpointerlockchangeEventPointerLockChangeEvent
onpointerlockerrorEventPointerLockErrorEvent
onpointermovePointerEventPointerMoveEvent
onpointeroutPointerEventPointerOutEvent
onpointeroverPointerEventPointerOverEvent
onpointerupPointerEventPointerUpEvent
onselectionchangeEventSelectionChangeEvent
onselectstartEventUnsupported
onshowEventUnsupported
ontouchcancelTouchEventTouchCancel
ontouchendTouchEventTouchEnd
ontouchmoveTouchEventTouchMove
ontouchstartTouchEventTouchStart
ontransitioncancelTransitionEventUnsupported
ontransitionendTransitionEventUnsupported
ontransitionrunTransitionEventUnsupported
ontransitionstartTransitionEventUnsupported

Relevant examples#