Salta ai contenuti

TextareaAutosize

Il componente TextareaAutosize regola automaticamente la sua altezza per adattarsi al contenuto.

Per usare il componente TextareaAutosize, importalo dai tuoi componenti e passa le prop necessarie.

Un TextareaAutosize semplice con utilizzo base.

import React from 'react';
import { TextareaAutosize } from '@firecms/ui';
export default function TextareaAutosizeBasicDemo() {
return (
<TextareaAutosize
placeholder="Type your text here..."
/>
);
}

Un esempio di un componente TextareaAutosize controllato.

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..."
/>
);
}

Dimostra come impostare il numero minimo e massimo di righe.

import React from "react";
import { TextareaAutosize } from "@firecms/ui";
export default function TextareaAutosizeRowsDemo() {
return (
<TextareaAutosize
placeholder="Type your text here..."
minRows={3}
maxRows={6}
/>
);
}