TextareaAutosize

Die TextareaAutosize-Komponente passt ihre Höhe automatisch an den Inhalt an.

Verwendung

Um die TextareaAutosize-Komponente zu verwenden, importieren Sie sie aus Ihren Komponenten und übergeben Sie die erforderlichen Props.

Einfaches TextareaAutosize

Ein einfaches TextareaAutosize mit grundlegender Verwendung.

import React from 'react';
import { TextareaAutosize } from '@firecms/ui';

export default function TextareaAutosizeBasicDemo() {
    return (
        <TextareaAutosize
            placeholder="Type your text here..."
        />
    );
}

Gesteuertes TextareaAutosize

Ein Beispiel für eine gesteuerte (controlled) TextareaAutosize-Komponente.

import React, { useState } from "react";
import { TextareaAutosize } from "@firecms/ui";

export default function TextareaAutosizeControlledDemo() {
    const [value, setValue] = useState("Controlled textarea");

    const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
        setValue(event.target.value);
    };

    return (
        <TextareaAutosize
            value={value}
            onChange={handleChange}
            placeholder="Type your text here..."
        />
    );
}

TextareaAutosize mit maximalen und minimalen Zeilen

Demonstriert, wie die minimale und maximale Anzahl von Zeilen festgelegt wird.

import React from "react";
import { TextareaAutosize } from "@firecms/ui";

export default function TextareaAutosizeRowsDemo() {
    return (
        <TextareaAutosize
            placeholder="Type your text here..."
            minRows={3}
            maxRows={6}
        />
    );
}