use_textarea_autosize

Demo

Usage

Simple example

use leptos::prelude::*;
use leptos::html::Textarea;
use leptos_use::{use_textarea_autosize, UseTextareaAutosizeReturn};

#[component]
fn Demo() -> impl IntoView {
let textarea = NodeRef::new();

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

view! {
    <textarea
        prop: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".

use leptos::prelude::*;
use leptos::html::Textarea;
use leptos_use::{use_textarea_autosize_with_options, UseTextareaAutosizeOptions, UseTextareaAutosizeReturn};

#[component]
fn Demo() -> impl IntoView {
let textarea = NodeRef::new();

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

view! {
    <textarea
        prop: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`.

Feature

This function is only available if the crate feature use_textarea_autosize is enabled

Types

Source

Source • Demo • Docs

Leptos-Use Guide