Skip to main content
Version: 0.18.0

Refs

The ref keyword can be used inside of any HTML element or component to get the DOM Element that the item is attached to. This can be used to make changes to the DOM outside of the view lifecycle method.

This is useful for getting ahold of canvas elements, or scrolling to different sections of a page. For example, using a NodeRef in a component's rendered method allows you to make draw calls to a canvas element after it has been rendered from view.

The syntax is:

use yew::{html, NodeRef, web_sys::Element};

// In create
self.node_ref = NodeRef::default();

// In view
html! {
    <div ref=self.node_ref.clone()></div>
}

// In rendered
let has_attributes = self.node_ref.cast::<Element>().unwrap().has_attributes();

Relevant examples​