Skip to content

Latest commit

 

History

History
210 lines (137 loc) · 4.55 KB

text-area.md

File metadata and controls

210 lines (137 loc) · 4.55 KB

TextArea

Source

A multiline text input that can automatically grow with its content.

Usage

You should have the chayns-components package installed. If that is not the case already, run

yarn add chayns-components

or

npm i chayns-components

After the chayns-components package is installed, you can import the component and use it with React:

import React from 'react'
import { TextArea } from 'chayns-components';

// ...

<TextArea {...} />

Props

The TextArea-component takes the following props:

Name Type Default Required
style { [key: string]: string | number }
disabled boolean false
className string
placeholder string
required boolean
design number TextArea.DEFAULT_DESIGN
onChange function
onBlur function
defaultValue string
value string
onKeyUp function
onKeyDown function
autogrow boolean
reference function
stopPropagation boolean false

style

style?: { [key: string]: string | number }

A React style object that will be applied to the text area.

disabled

disabled?: boolean

Wether the component ignores any user interaction and is rendered with a disabled style.

className

className?: string

A classname string that will be applied to the <textarea>-element.

placeholder

placeholder?: string

A placeholder, that will be displayed if the text area is empty.

required

required?: boolean

Wether the text area is required for a form to complete. Renders the text area with an error style when its empty.

design

design?: number

The design of the input. Use either TextArea.DEFAULT_DESIGN or TextArea.BORDER_DESIGN.

onChange

onChange?: function

A callback that is invoked when the value of the <textarea> changes.

onBlur

onBlur?: function

A callback that is invoked when the text area loses focus.

defaultValue

defaultValue?: string

The default value of the text area. Has no effect when the value prop is used.

value

value?: string

The current text value of the area.

onKeyUp

onKeyUp?: function

A callback that will be called when the keyup-event is fired from the <textarea>-element.

onKeyDown

onKeyDown?: function

A callback that will be called when the keydown-event is fired from the <textarea>-element.

autogrow

autogrow?: boolean

Wether the text area should automatically grow with its content.

reference

reference?: function

A function that will be invoked with a reference to the <textarea>-element or null.

stopPropagation

stopPropagation?: boolean

Wether click events should be stopped from propagating to parent elements.