Textarea

v.2.0.1

The Textarea has necessary peerDependencies, please make sure that you have them in your project

"@mercell/tailwind": "^6.0.1",
"classnames": "^2.3.1",
"react": "^17.0.2" 

Usage

Using the Textarea component is as simple as importing it like this.

Live Editor

// You can play with code, with HTML tags and text as much as you want! const TextAreaWrapper = () => { const [val, setVal] = React.useState<string>(''); const [val2, setVal2] = React.useState<string>(''); const ref = React.useRef<HTMLTextAreaElement>(null); const onChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => setVal(e.target.value); const onChange2 = (e: React.ChangeEvent<HTMLTextAreaElement>) => setVal(e.target.value); return ( <form className="space-y-4"> <div className="field-layout"> <label>Textarea with auto height resize</label> <Textarea onChange={onChange} value={val} ref={ref} heightAutoResize/> </div> <div className="field-layout"> <label>Textarea error example</label> <Textarea required onChange={onChange} value={val} ref={ref} pattern="[🐻]"/> <p className="text-invalid">This is an error message</p> </div> </form> ); } render (<TextAreaWrapper/>)

// You can play with code, with HTML tags and text as much as you want!
const TextAreaWrapper = () => {
    const [val, setVal] = React.useState<string>('');
    const [val2, setVal2] = React.useState<string>('');
    const ref = React.useRef<HTMLTextAreaElement>(null);
    const onChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => setVal(e.target.value);
    const onChange2 = (e: React.ChangeEvent<HTMLTextAreaElement>) => setVal(e.target.value);
    return (
        <form className="space-y-4">
            <div className="field-layout">
                <label>Textarea with auto height resize</label>
                <Textarea onChange={onChange} value={val} ref={ref} heightAutoResize/>
            </div>
            <div className="field-layout">
                <label>Textarea error example</label>
                <Textarea required onChange={onChange} value={val} ref={ref} pattern="[🐻]"/>
                <p className="text-invalid">This is an error message</p>
            </div>
        </form>
    );
}
render (<TextAreaWrapper/>)

Result

Types, definitions, etc.

Types

TextareaProps

type TextareaProps = {
    heightAutoResize?: boolean;
    invalid?: boolean;
} & JSX.IntrinsicElements['textarea'];

Changelog

Change Log - @mercell/textarea-react

This log was last generated on Fri, 18 Nov 2022 09:57:29 GMT and should not be manually modified.

2.0.1

Fri, 18 Nov 2022 09:57:29 GMT

Patches

• Fix top margin to align it with input

2.0.0

Fri, 11 Nov 2022 09:18:57 GMT

Breaking changes

• New styling approach - use only tailwind classes, add tailwind-merge library

1.0.0

Thu, 15 Sep 2022 06:07:41 GMT

Breaking changes

• Migration to Tailwind3, React 18 and ViteJS from webpack.

0.0.2

Fri, 19 Aug 2022 07:54:17 GMT

Patches

• New component based on native textarea

Figma

Sometimes it can take some time until Figma will render component inside embed iframe. Try to click plus icon to 'reset' initial loader. (Works only in Chrome)

Click me to open figma in the new card