React Text Input
Motivation
- Use arbitrary markup in
placeholder
even icons, animation etc. - Customize scrollbars for
TextArea
. Done with help ofreact-scroll-box
. - Enable vertical and horizontal autogrow that is fully controlled from CSS for
Input
andTextArea
. - Use components in either controlled or uncontrolled way.
Usage
var TextArea = TextArea; // ES5 import Input TextArea GenericInput from 'react-text-input'; // ES6 <TextArea ="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 |
Should. |
Uncontrolled input component markup:
<Input ="search" ="Christmas gifts" = =/>
TextArea
Autogrowing text area implementation. Has all the same properties as Input
.
<TextArea = =/>
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 ="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.