Popular Releases
Popular Libraries
New Libraries
Top Authors
Trending Kits
Trending Discussions
Learning
United Entry | |
v2.5.0 | |
Kakoune v2021.08.28 | |
Smooth Scrolling Beta |
vnote United Entry |
qutebrowser v2.5.0 |
kakoune Kakoune v2021.08.28 |
ninja |
neovide Smooth Scrolling Beta |
1
38 Libraries
628
2
10 Libraries
103
3
7 Libraries
485
4
6 Libraries
171
5
5 Libraries
498
6
5 Libraries
117
7
4 Libraries
440
8
4 Libraries
1129
9
4 Libraries
873
10
4 Libraries
127
1
38 Libraries
628
2
10 Libraries
103
3
7 Libraries
485
4
6 Libraries
171
5
5 Libraries
498
6
5 Libraries
117
7
4 Libraries
440
8
4 Libraries
1129
9
4 Libraries
873
10
4 Libraries
127
No Trending Kits are available at this moment for Text Editor
QUESTION
How to query and update the DOM with yew?
Asked 2022-Mar-31 at 13:45Is there any way to make DOM action via use_node_ref
? or alternatively, how to do document.query_selector()
in Rust using yew?
1use web_sys::HtmlInputElement;
2use yew::{
3 function_component, functional::*, html,
4 NodeRef, Html
5};
6
7#[function_component(UseRef)]
8pub fn ref_hook() -> Html {
9 let input_ref = use_node_ref();
10 let all_editables = input_ref.query_selector("[contenteditable]")
11 web_sys::console::(all_editables)
12
13 html! {
14 <div>
15 <input ref={input_ref} type="number" />
16 </div>
17 }
18}
19
20
Goal: I have a rich text editor app. And I have a minified html in form of string like this <h1> this is title</h1><p>hello world</>
and I need to get the DOM and change the innerHTML
to set it to this value.
Goal2: I will also need to update the innerHtml
as the user write things in the contenteditable
elements. Fore example when the user type @john smith
I will make a create an <a>
element with href
the have the link to John smith
's profile.
ANSWER
Answered 2022-Mar-31 at 13:45Many things to tackle with your question.
More to read about this in Alternative for innerHTML?
But instead create text nodes. So using web-sys you would do something like:
1use web_sys::HtmlInputElement;
2use yew::{
3 function_component, functional::*, html,
4 NodeRef, Html
5};
6
7#[function_component(UseRef)]
8pub fn ref_hook() -> Html {
9 let input_ref = use_node_ref();
10 let all_editables = input_ref.query_selector("[contenteditable]")
11 web_sys::console::(all_editables)
12
13 html! {
14 <div>
15 <input ref={input_ref} type="number" />
16 </div>
17 }
18}
19
20let txtNode: Node = window()
21 .unwrap_throw()
22 .document()
23 .unwrap_throw()
24 .create_text_node("Hello")
25 .dyn_into()
26 .unwrap_throw();
27
28myDomElement.append_hild(&txtNode).unwrap_throw();
29
There are many ways to do this so ill just show you one of them - controlled input
core idea is keep your input value in use_state
and sync it with the input element using value
and oninput
attributes.
1use web_sys::HtmlInputElement;
2use yew::{
3 function_component, functional::*, html,
4 NodeRef, Html
5};
6
7#[function_component(UseRef)]
8pub fn ref_hook() -> Html {
9 let input_ref = use_node_ref();
10 let all_editables = input_ref.query_selector("[contenteditable]")
11 web_sys::console::(all_editables)
12
13 html! {
14 <div>
15 <input ref={input_ref} type="number" />
16 </div>
17 }
18}
19
20let txtNode: Node = window()
21 .unwrap_throw()
22 .document()
23 .unwrap_throw()
24 .create_text_node("Hello")
25 .dyn_into()
26 .unwrap_throw();
27
28myDomElement.append_hild(&txtNode).unwrap_throw();
29#[function_component(ControlledInputComponent)]
30pub fn controlled_input_component() -> Html {
31 let my_text_handle = use_state(|| "".to_string());
32 let my_text = (*my_text_handle).clone();
33
34 let handle_input = Callback::from(move |input_event: InputEvent| {
35 let event: Event = input_event.dyn_into().unwrap_throw();
36 let input_elem: HTMLInputElement = event.target().unwrap_throw().dyn_into().unwrap_throw();
37 let value = input_elem.value();
38 my_text_handle.set(value); // update as user types
39
40 });
41
42 html! {
43 <div>
44 <input type="text" value={my_text} oninput={handle_input} />
45 </div>
46 }
47}
48
**External to yew as you should generally avoid updating DOM that is controlled by yew
You can then use use_effec_with_deps
to react to your input changing and update your external preview there
1use web_sys::HtmlInputElement;
2use yew::{
3 function_component, functional::*, html,
4 NodeRef, Html
5};
6
7#[function_component(UseRef)]
8pub fn ref_hook() -> Html {
9 let input_ref = use_node_ref();
10 let all_editables = input_ref.query_selector("[contenteditable]")
11 web_sys::console::(all_editables)
12
13 html! {
14 <div>
15 <input ref={input_ref} type="number" />
16 </div>
17 }
18}
19
20let txtNode: Node = window()
21 .unwrap_throw()
22 .document()
23 .unwrap_throw()
24 .create_text_node("Hello")
25 .dyn_into()
26 .unwrap_throw();
27
28myDomElement.append_hild(&txtNode).unwrap_throw();
29#[function_component(ControlledInputComponent)]
30pub fn controlled_input_component() -> Html {
31 let my_text_handle = use_state(|| "".to_string());
32 let my_text = (*my_text_handle).clone();
33
34 let handle_input = Callback::from(move |input_event: InputEvent| {
35 let event: Event = input_event.dyn_into().unwrap_throw();
36 let input_elem: HTMLInputElement = event.target().unwrap_throw().dyn_into().unwrap_throw();
37 let value = input_elem.value();
38 my_text_handle.set(value); // update as user types
39
40 });
41
42 html! {
43 <div>
44 <input type="text" value={my_text} oninput={handle_input} />
45 </div>
46 }
47}
48let my_text_handle = use_state(|| "".to_string());
49let my_text = (*my_text_handle).clone();
50
51use_effect_with_deps(move |my_text| {
52 // run all the code from my tip #1 like:
53 // myDomElement.append_hild(&txtNode).unwrap_throw();
54 ||{}
55}, my_text);
56
Community Discussions contain sources that include Stack Exchange Network
QUESTION
How to query and update the DOM with yew?
Asked 2022-Mar-31 at 13:45Is there any way to make DOM action via use_node_ref
? or alternatively, how to do document.query_selector()
in Rust using yew?
1use web_sys::HtmlInputElement;
2use yew::{
3 function_component, functional::*, html,
4 NodeRef, Html
5};
6
7#[function_component(UseRef)]
8pub fn ref_hook() -> Html {
9 let input_ref = use_node_ref();
10 let all_editables = input_ref.query_selector("[contenteditable]")
11 web_sys::console::(all_editables)
12
13 html! {
14 <div>
15 <input ref={input_ref} type="number" />
16 </div>
17 }
18}
19
20
Goal: I have a rich text editor app. And I have a minified html in form of string like this <h1> this is title</h1><p>hello world</>
and I need to get the DOM and change the innerHTML
to set it to this value.
Goal2: I will also need to update the innerHtml
as the user write things in the contenteditable
elements. Fore example when the user type @john smith
I will make a create an <a>
element with href
the have the link to John smith
's profile.
ANSWER
Answered 2022-Mar-31 at 13:45Many things to tackle with your question.
More to read about this in Alternative for innerHTML?
But instead create text nodes. So using web-sys you would do something like:
1use web_sys::HtmlInputElement;
2use yew::{
3 function_component, functional::*, html,
4 NodeRef, Html
5};
6
7#[function_component(UseRef)]
8pub fn ref_hook() -> Html {
9 let input_ref = use_node_ref();
10 let all_editables = input_ref.query_selector("[contenteditable]")
11 web_sys::console::(all_editables)
12
13 html! {
14 <div>
15 <input ref={input_ref} type="number" />
16 </div>
17 }
18}
19
20let txtNode: Node = window()
21 .unwrap_throw()
22 .document()
23 .unwrap_throw()
24 .create_text_node("Hello")
25 .dyn_into()
26 .unwrap_throw();
27
28myDomElement.append_hild(&txtNode).unwrap_throw();
29
There are many ways to do this so ill just show you one of them - controlled input
core idea is keep your input value in use_state
and sync it with the input element using value
and oninput
attributes.
1use web_sys::HtmlInputElement;
2use yew::{
3 function_component, functional::*, html,
4 NodeRef, Html
5};
6
7#[function_component(UseRef)]
8pub fn ref_hook() -> Html {
9 let input_ref = use_node_ref();
10 let all_editables = input_ref.query_selector("[contenteditable]")
11 web_sys::console::(all_editables)
12
13 html! {
14 <div>
15 <input ref={input_ref} type="number" />
16 </div>
17 }
18}
19
20let txtNode: Node = window()
21 .unwrap_throw()
22 .document()
23 .unwrap_throw()
24 .create_text_node("Hello")
25 .dyn_into()
26 .unwrap_throw();
27
28myDomElement.append_hild(&txtNode).unwrap_throw();
29#[function_component(ControlledInputComponent)]
30pub fn controlled_input_component() -> Html {
31 let my_text_handle = use_state(|| "".to_string());
32 let my_text = (*my_text_handle).clone();
33
34 let handle_input = Callback::from(move |input_event: InputEvent| {
35 let event: Event = input_event.dyn_into().unwrap_throw();
36 let input_elem: HTMLInputElement = event.target().unwrap_throw().dyn_into().unwrap_throw();
37 let value = input_elem.value();
38 my_text_handle.set(value); // update as user types
39
40 });
41
42 html! {
43 <div>
44 <input type="text" value={my_text} oninput={handle_input} />
45 </div>
46 }
47}
48
**External to yew as you should generally avoid updating DOM that is controlled by yew
You can then use use_effec_with_deps
to react to your input changing and update your external preview there
1use web_sys::HtmlInputElement;
2use yew::{
3 function_component, functional::*, html,
4 NodeRef, Html
5};
6
7#[function_component(UseRef)]
8pub fn ref_hook() -> Html {
9 let input_ref = use_node_ref();
10 let all_editables = input_ref.query_selector("[contenteditable]")
11 web_sys::console::(all_editables)
12
13 html! {
14 <div>
15 <input ref={input_ref} type="number" />
16 </div>
17 }
18}
19
20let txtNode: Node = window()
21 .unwrap_throw()
22 .document()
23 .unwrap_throw()
24 .create_text_node("Hello")
25 .dyn_into()
26 .unwrap_throw();
27
28myDomElement.append_hild(&txtNode).unwrap_throw();
29#[function_component(ControlledInputComponent)]
30pub fn controlled_input_component() -> Html {
31 let my_text_handle = use_state(|| "".to_string());
32 let my_text = (*my_text_handle).clone();
33
34 let handle_input = Callback::from(move |input_event: InputEvent| {
35 let event: Event = input_event.dyn_into().unwrap_throw();
36 let input_elem: HTMLInputElement = event.target().unwrap_throw().dyn_into().unwrap_throw();
37 let value = input_elem.value();
38 my_text_handle.set(value); // update as user types
39
40 });
41
42 html! {
43 <div>
44 <input type="text" value={my_text} oninput={handle_input} />
45 </div>
46 }
47}
48let my_text_handle = use_state(|| "".to_string());
49let my_text = (*my_text_handle).clone();
50
51use_effect_with_deps(move |my_text| {
52 // run all the code from my tip #1 like:
53 // myDomElement.append_hild(&txtNode).unwrap_throw();
54 ||{}
55}, my_text);
56