From f67b71c5a56e15379b01be11729b3dcbfd9199d8 Mon Sep 17 00:00:00 2001 From: Jonathan Kelley Date: Sun, 24 Apr 2022 19:44:20 -0400 Subject: [PATCH] feat: custom element example --- examples/custom_element.rs | 30 ++++++++++++++++++++++++++++++ 1 file changed, 30 insertions(+) create mode 100644 examples/custom_element.rs diff --git a/examples/custom_element.rs b/examples/custom_element.rs new file mode 100644 index 000000000..e0b12d87e --- /dev/null +++ b/examples/custom_element.rs @@ -0,0 +1,30 @@ +//! This example shows to wrap a webcomponent / custom element with a component. +//! +//! Oftentimes, a third party library will provide a webcomponent that you want +//! to use in your application. This example shows how to create that custom element +//! directly with the raw_element method on NodeFactory. + +use dioxus::prelude::*; + +fn main() { + let mut dom = VirtualDom::new(app); + let _ = dom.rebuild(); + + let output = dioxus::ssr::render_vdom(&dom); + + println!("{}", output); +} + +fn app(cx: Scope) -> Element { + let nf = NodeFactory::new(&cx); + + let mut attrs = dioxus::core::exports::bumpalo::collections::Vec::new_in(nf.bump()); + + attrs.push(nf.attr("client-id", format_args!("abc123"), None, false)); + + attrs.push(nf.attr("name", format_args!("bob"), None, false)); + + attrs.push(nf.attr("age", format_args!("47"), None, false)); + + Some(nf.raw_element("my-element", None, &[], attrs.into_bump_slice(), &[], None)) +}