<PaperTextarea />
Check out a live demo at http://scienceai.github.io/paper-textarea
Install
npm install paper-textarea
Usage
;; Component // ... setup state and change handlers return <PaperTextarea name='description' label='A brief description (500 words or less)' error=thisstateerror ? 'Could not process input' : '' onChange=thishandleChange value=thisstatedescription /> ;
Using the CSS
With postcss-import
or similar:
;
API
The <PaperTextarea>
component has the following internal structure:
<!-- animates a line on the bottom border of the textarea -->
<PaperTextarea>
accepts the following props
:
label
: String. Required. The label that will be displayed on the<textarea>
element.name
: String. Required. Thename
attribute that will be attached to the<textarea>
element.className
: String. Optional. This class will be added to the<div>
wrapping the<textarea>
element.error
: String. Optional. An error message that is displayed in the<span className='error'>
below the<textarea>
.floatLabel
: Boolean. Optional. Floats the<label>
above the<textarea>
when focused. Defaults totrue
.mustDisplayError
: Bool. Optional. Ensures that theerror
provided is displayed regardless of whether or not the component has been interacted with.onBlurCapture
: Function. Optional. Called on theblur
event on the<textarea>
.onChange
: Function. Optional. Called on thechange
event on the<textarea>
.onFocus
: Function. Optional. Called on thefocus
event on the<textarea>
.onKeyDown
: Function. Optional. Called on thekeydown
event on the<textarea>
.onResize
: Function. Optional. Called on theresize
event on the<textarea>
.defaultValue
: String. Optional. See the docs on thedefaultValue
prop.placeholder
: String. Optional. Note that you should not setfloatLabel
tofalse
if using a placeholder as it will overlap with the label.value
: String. Optional.
Any additional props not specified above will be passed to the <textarea>
element.
Example
For a fuller example, visit the example/
directory.
npm run watch
open example/index.html
License
Apache-2.0