3.0.2 • Published 9 years ago

paper-input v3.0.2

Weekly downloads
6
License
Apache-2.0
Repository
github
Last release
9 years ago

<PaperInput />

Build Status

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

Install

npm install paper-input

Usage

import React from 'react';
import PaperInput from 'paper-input';

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

  return (
    <PaperInput
      name='email'
      label='Email Address'
      type='email'
      floatLabel={true}
      error={this.state.error ? 'Please enter a valid email address' : ''}
      onChange={this.handleChange.bind(this)}
      value={this.state.email}
    />
  );
}

Using the CSS

With postcss-import or similar:

@import "paper-input";

API

The <PaperInput> component has the following internal structure:

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

<PaperInput> accepts the following props:

  • label: String. Required. The label that will be displayed on the <input> element.
  • name: String. Required. The name attribute that will be attached to the <input> element.
  • className: String. Optional. This class will be added to the <div> wrapping the <input> element.
  • error: String. Optional. An error message that is displayed in the <span class='error'> below the <input>.
  • floatLabel: Boolean. Optional. Floats the <label> above the <input> when focused. Defaults to true.
  • large: String. Optional. Adds a CSS class to increase the font size of the <input> and <label>.
  • 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 <input>.
  • onChange: Function. Optional. Called on the change event on the <input>.
  • onFocus: Function. Optional. Called on the focus event on the <input>.
  • onKeyDown: Function. Optional. Called on the keydown event on the <input>.
  • 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.
  • type: String. Optional. Defaults to 'text'.
  • value: String. Optional.
  • autoFocus: Boolean. Automatically focused.
  • required: Boolean. Required field in a form.

Example

For a fuller example, visit the example/ directory.

npm run watch
open example/index.html

License

Apache-2.0

3.0.2

9 years ago

3.0.1

9 years ago

3.0.0

9 years ago

2.4.0

9 years ago

2.3.1

9 years ago

2.3.0

9 years ago

2.1.2

9 years ago

2.1.1

9 years ago

2.1.0

9 years ago

2.0.0

9 years ago

1.1.0

9 years ago

1.0.2

10 years ago

1.0.1

10 years ago

1.0.0

10 years ago

0.1.7

10 years ago

0.1.6

10 years ago

0.1.5

10 years ago

0.1.4

10 years ago

0.1.2

10 years ago

0.1.1

10 years ago

0.1.0

10 years ago