Function use_textarea_autosize

pub fn use_textarea_autosize<El, T>(
    el: El,
) -> UseTextareaAutosizeReturn<impl Fn() + Clone>
where
    El: Into<ElementMaybeSignal<T, Element>> + Clone,
    T: Into<Element> + Clone + 'static,

Automatically update the height of a textarea depending on the content.

Demo

Link to Demo

Usage

Simple example

let textarea = create_node_ref::<Textarea>();

let UseTextareaAutosizeReturn {
    content,
    set_content,
    trigger_resize
} = use_textarea_autosize(textarea);

view! {
    <textarea
        value=content
        on:input=move |evt| set_content.set(event_target_value(&evt))
        node_ref=textarea
        class="resize-none"
        placeholder="What's on your mind?"
    />
}

Make sure that you set box-sizing: border-box on the textarea element.

It’s also recommended to reset the scrollbar styles for the textarea element to avoid incorrect height values for large amounts of text.

textarea {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

textarea::-webkit-scrollbar {
  display: none;
}

With rows attribute

If you need support for the rows attribute on a textarea element, then you should set the style_prop option to "min-height".

let textarea = create_node_ref::<Textarea>();

let UseTextareaAutosizeReturn {
    content,
    set_content,
    ..
} = use_textarea_autosize_with_options(
    textarea,
    UseTextareaAutosizeOptions::default().style_prop("min-height"),
);

view! {
    <textarea
        value=content
        on:input=move |evt| set_content.set(event_target_value(&evt))
        node_ref=textarea
        class="resize-none"
        placeholder="What's on your mind?"
        rows="3"
    />
}

Server-Side Rendering

On the server this will always return an empty string as ´contentand a no-optrigger_resize`.