React Text Input

Live Demo

Motivation

• Use arbitrary markup in placeholder even icons, animation etc.
• Customize scrollbars for TextArea. Done with help of react-scroll-box.
• Enable vertical and horizontal autogrow that is fully controlled from CSS for Input and TextArea.
• Use components in either controlled or uncontrolled way.

Usage

var TextArea = require('react-text-input').TextArea; // ES5

import {Input, TextArea, GenericInput} from 'react-text-input'; // ES6

<TextArea defaultValue="Hello world!"/>

Components

This pakage provides three React components:

GenericInput

Abstract component that expects arbitrary editing control as a child. Manages placeholder and autogow.

Prop Name	Type	Default	Description
value	String		Value represented by this GenericInput.
disabled	Boolean	false	Toggles component disabled with .text-input--disabled.
placeholder	*		Any value including React element, that is displayed if value is empty.
className	String		Style class name added to root element.

Input

One line text input component. Generally behaves like regular input. Inherits all properties from GenericInput and regular input.

Prop Name	Type	Default	Description
value	String		Value represented by this Input if it is controlled.
defaultValue	String		Default value represented by this Input if it is uncontrolled.
fitLineLength	Boolean	false	Toggle behaviour when input fits length of string in value or defaultValue.

Uncontrolled input component markup:

<Input type="search"
       defaultValue="Christmas gifts"
       placeholder={<span><i className="fa fa-search"/> Search</span>}
       fitLineLength={true}/>

TextArea

Autogrowing text area implementation. Has all the same properties as Input.

<TextArea fitLineLength={true}
          onChange={e => console.log(e.target.value)}/>

Styles

By default, components have no visual decoration, so you need to provide a custom class name (like form-control from Bootstrap) to make it them visible.

In most cases you should change styling only for the root DOM element. Styles applied to Input and TextArea behave just like regular input and textare elements do.

Class Name	Description
.text-input	Root style class for both Input and TextArea
.text-input--filled	Added when component stores a non-empty value.
.text-input--disabled	Added when component is disabled.
.text‑input‑‑fit‑line‑length	Added when component should grow horizontally.
.text-input--text	Modifier that matches type of input control. For example, input[type="password"] would have .text-input--password` specified.
.text-input--text-area	Added for textarea control.
.text-input__control	HTML UI element input or textarea.
.text-input__placeholder	Placeholder container. Content of the placeholder prop is rendered inside this container.
.text-input__content	Container that stores input text. Required for autogrow.

Autogrowing

By default, TextArea has height of a single line of text and grows vertically without any limit. You can constraint vertical expansion with min-height and max-height.

.vertical-constraint {
  min-height: 100px;
  max-height: 200px;
}

Then provide this modifier as a className value.

<TextArea className="vertical-constraint"/>

Horizontal constraints work in the same way for both Input and TextArea when fitLineLength={true} specified.

.horizontal-constraint {
  min-width: 100px;
  max-width: 200px;
}

License

The code is available under MIT licence.