Package Exports

paper-textarea

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (paper-textarea) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

`<PaperTextarea />`

Check out a live demo at http://scienceai.github.io/paper-textarea

Install

npm install paper-textarea

Usage

import React from 'react';
import PaperTextarea from 'paper-textarea';

class MyComponent extends React.Component {
  // ... setup state and change handlers

  return (
    <PaperTextarea
      name='description'
      label='A brief description (500 words or less)'
      error={this.state.error ? 'Could not process input' : ''}
      onChange={this.handleChange.bind(this)}
      value={this.state.description}
    />
  );
}

Using the CSS

With postcss-import or similar:

@import "paper-input/dist/paper-input.css";

API

The <PaperTextarea> component has the following internal structure:

<div class='paper-textarea'>
  <textarea />
  <label />
  <span class='border-line' /> <!-- animates a line on the bottom border of the textarea -->
  <span class='error' />
</div>

<PaperTextarea> accepts the following props:

label: String. Required. The label that will be displayed on the <textarea> element.
name: String. Required. The name 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 to true.
mustDisplayError: Bool. Optional. Ensures that the error provided is displayed regardless of whether or not the component has been interacted with.
onBlurCapture: Function. Optional. Called on the blur event on the <textarea>.
onChange: Function. Optional. Called on the change event on the <textarea>.
onFocus: Function. Optional. Called on the focus event on the <textarea>.
onKeyDown: Function. Optional. Called on the keydown event on the <textarea>.
onResize: Function. Optional. Called on the resize event on the <textarea>.
defaultValue: String. Optional. See the docs on the defaultValue prop.
placeholder: String. Optional. Note that you should not set floatLabel to false 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