TxRegionsInput — Supernatural text input

The TxRegionsInput component is a React text input component that can highlight sub-content based on built-in or custom markers and / or highlight invalid characters based on the built-in or custom validators. It ships with a variety of built-in markers and validators (e.g. URLs, email addresses, etc.). Custom markers and validators can be defined via RegExps or string-parsing functions. DOM hooks are provided for styling based on the focus state and validity of the input.

Examples#

Email address input — preset="email"#

<TxRegionsInput
    placeholder="Enter an email address"
    preset="email"
/>

URL input — preset="url"#

<TxRegionsInput
    placeholder="Enter a URL"
    preset="url"
/>

Numeric inputs#

<TxRegionsInput
    placeholder="Enter a number of the style 1,234,567.89"
    preset="number"
/>
<TxRegionsInput
    placeholder="Enter a number of the style 1.234.567,89"
    preset="number eu"
/>
<TxRegionsInput
    placeholder="Enter a number of the style 1.234.567,89"
    preset="int"
/>
<TxRegionsInput
    placeholder="Enter a number of the style 1.234.567,89"
    preset="uint"
/>

Min and max lengths#

<TxRegionsInput
    placeholder="minLength=3 maxLength=10"
    maxLength="10"
    minLength="3"
    defaultValue="This is too long"
/>

Validation messages — appear after blur#

<TxRegionsInput
    placeholder="Enter an email address"
    preset="email"
    maxLength="64"
    minLength="3"
    required
>
    <div className="error-hint" data-hint-key="minLength">This value must be at least 3 characters in length.</div>
    <div className="error-hint" data-hint-key="maxLength">This value is too long (the max length is 64).</div>
    <div className="error-hint" data-hint-key="required">This field is required.</div>
    <div className="error-hint" data-hint-key="general">Please enter a valid email address.</div>
</TxRegionsInput>

The visibility of the validation messages is toggled via CSS styling and data-* attributes on the <div> that wraps the input element. In general, the data-* provide styling hooks relating to the validity state, the focus state and whether the value has been changed or not.

The styles that allow the toggling of the visibility of the messages:

.error-hint {
    color: #c00;
    font-size: 0.9em;
    margin-top: 0.15em;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: all 0.3s;
}
 
[data-ux-state~="focus-had"][data-violations~="general"] > [data-hint-key="general"],
[data-ux-state~="focus-had"][data-violations~="required"] > [data-hint-key="required"],
[data-ux-state~="focus-had"][data-violations~="minLength"] > [data-hint-key="minLength"],
[data-ux-state~="focus-had"][data-violations~="maxLength"] > [data-hint-key="maxLength"] {
    max-height: 1.3em;
    opacity: 1;
}

Highlight URLs and email addresses#

import TxRegionsInput, { markers } from 'txregions';
<TxRegionsInput
    placeholder="All your base are belong to us"
    defaultValue="An email address example@example.com and a couple URLs google.com, https://www.google.com."
    markers={[markers.email, markers.urls]}
/>

Dynamic highlighting#

import TxRegionsInput, { getMatchMarker } from 'txregions';
<TxRegionsInput
    defaultValue={`"If you're going to try, go all the way. [...] It's the only good fight there is." -- Charles Bukowski, Factotum`}
    markers={getMatchMarker(this.state.substringRx, 'demo-mark')}
    dynamicMarkers
/>

Controlled input#

Set the value programattically.

handleEnter({ clean }) {
    this.setState({ value: clean });
}
handleRawChange({ raw }) {
    this.setState({ value: raw });
}
<TxRegionsInput
    placeholder="Controlled"
    maxLength="10"
    value={this.state.value}
    onRawChange={this.handleRawChange}
    pattern="[a-zA-Z0-9_\.]+"
/>

Getting started#

<TxRegionsInput
    placeholder="Enter username"
    minLength="3"
    maxLength="32"
    pattern="[a-zA-Z0-9_\.]+"
    required
/>

Basic use of the <TxRegionsInput> component is as noted in the code-snippet, above. The placeholder, minLength, maxLength, required and pattern inputs all work pretty much as one would expect, but invalid characters have the .txr-invalid CSS class added to them. This CSS class can be styled to mark invalid characters in red (as is the case in this demo).

defaultValue — prop#

Works the same as a typical defaultValue prop on an <input> element.

value — prop#

Works the same as typical value props. Passing this prop renders the component instance a "controlled" component.

Related:

onRawChange — prop#

To create a controlled input, the value and onRawChange props should be used. The value prop is used to set the value of the input. The onRawChange prop should be set to a function which will be invoked with a single parameter, a data object of the following form whenever there is a change to the input:

{
    raw: string,
    caret: int
}
  • raw is the value entered into the input
  • caret is the cursor position

Related:

onUpdate — prop#

To listen for the rendered value of the input, the onUpdate prop should be used. The value should be a function taking in a single paramter, an object of the form:

{
    clean: string,
    component: TxRegionsInput,
    isValid: boolean,
    raw: string,
    violations: string?,
    input?: HTMLInputElement,
    value?: string
}
  • clean is the rendered string value of the text input
  • component is the TxRegionsInput instance
  • isValid is true if there are no violations, false otherwise
  • raw is the raw input value, before white-space is collapsed and trimmed
  • violations is the value of the data-violations attribute on the wrapping <div>, it is also a list of the violations — see [data-violations] — HTML attribute, below
  • input is the HTMLInputElement that is generated — see the input prop, below
  • value is the current value of the input

onEnterKeyDown — prop#

The onEnterKeyDown prop can be used to listen for the Enter keydown. The value should be a function taking in a single paramter, an object of the form:

{
    metaKey: boolean,
    shiftKey: boolean,
    clean: string,
    component: TxRegionsInput,
    isValid: boolean,
    raw: string,
    violations: string?,
    input?: HTMLInputElement,
    value?: string
}
  • metaKey is true if the meta key is pressed while Enter is pressed
  • shiftKey is true if the shift key is pressed while Enter is pressed
  • clean is the rendered string value of the text input
  • component is the TxRegionsInput instance
  • isValid is true if there are no violations, false otherwise
  • raw is the raw input value, before white-space is collapsed and trimmed
  • violations is the value of the data-violations attribute on the wrapping <div>, it is also a list of the violations — see [data-violations] — HTML attribute, below
  • input is the HTMLInputElement that is generated — see the input prop, below
  • value is the current value of the input

Built-in validation props#

required — prop#

  • Type: bool
  • Default: false

Indicates whether the input must have a non-whitespace value to be considered in a valid state.

maxLength — prop#

  • Type: string | number
  • Default: null

Sets a maximum length for a valid input value. Characters that exceed the maximum length are considered invalid.

Note: This prop does not prevent additional characters from being entered once the maximum length has been reached.

minLength — prop#

  • Type: string | number
  • Default: null

Sets a minimum length for a valid input value.

pattern — prop#

  • Type: string
  • Default: null
  • Example: pattern="\(?\d{3}\)?\W?\d{3}\W\d{4}"
    • Valid: (123) 456-7890
    • Valid: 123-456-7890
    • Invalid: Cell: 123-456-7890

Emulates the pattern attribute of <input> elements. The value should be a string representation of the regular expression. It should not be surrounded by forward slashes.

When the pattern prop is used, the entire value must match the pattern to be considered valid. Any non-matching characters are considered invalid. This is consistent with the pattern attribute of <input> elements.

preset — prop#

  • Type: string
  • Default: null

The preset prop allows the built-in validators to be leveraged. It can be set to one of a handful of predefined values that will cause the input to mark values, character by character, as invalid if they do not fit the selected preset.

preset can be set to any of the following:

  • "email"
  • "url"
  • "number" - E.g. 1,234,567.89
  • "number eu" - E.g. 1.234.567,89
  • "int"
  • "uint"

If invalid characters are entered, the data-violation value will be "general". See data-violations HTML attribute.

DOM structure#

Generally speaking, the resulting DOM structure is along the lines of the following:

<div
    data-violations={violations}
    data-ux-state={`${uxFocus} ${uxChanged}`}
    {...setWrapperProps}
>
    <input
        name={ this.props.input }
        value={ this.props.clean.trim() }
        {...setInputProps} />
    <div
        contentEditable="true"
        spellCheck={ this.props.spellCheck }
        {...setEditableProps} />
    { this.props.children }
</div>

There are a few odds and ends that differ, but for the most part the JSX above resembles the resultant HTML. And, the <input> element is only present if the input prop is specified. See the input prop section, below.

data-violations — HTML attribute#

The data-violations attribute holds space separated strings representing the current violations of the input. If there aren't any violations, the attribute is not present. So, the presence of this attribute on the wrapping <div> indicates the input is in an invalid state.

The value of the data-violations attribute depends on why the input is in an invalid state. Values and their causes:

  • required - A value is not entered but the requried boolean prop is set
  • minLength - The length of the value entered is less than the minLength prop
  • maxLength - The length of the value entered exceeds the maxLength prop
  • pattern - The input value is not fully covered by the regular expression specified in the pattern prop
  • <my-validator-key> - When a custom validator is provided (via the validators prop), it can optionally provide a key which will be used as a violation value in the data-violations attribute. For instance, validators={{ digits: /\d+/ }} would add digits to the data-violations if a non-digit were entered into the input.
  • general - All other scenarios, including invalid values based on the preset prop

Multiple violations can be present.

This attribute can be used as a styling hook, which is indeed the approach taken by this demo page for setting the border of the input elements to red and for toggling validation messages.

data-ux-state — HTML attribute#

The data-ux-state attribute indicates two aspects of the current state of the component:

  • Focus related state
    • data-ux-state indicates if the input element currently has focus, has never had focus, or has at some point in time had focus.
    • Possible values:
      • focus-now
      • focus-had
      • focus-never
    • This can be useful for styling purposes. For instance, maybe validation messages should only be shown after the component has had focus. In this case, the CSS selecor [data-ux-state~=focus-had] can be used.
  • Value change related state
    • data-ux-state indicates if the input value has or has not ever changed
    • Possible values:
      • changed-never
      • changed-done
    • This can be useful for styling purposes. For instance, maybe validation messages should only be shown after the component has had focus. In this case, the CSS selecor [data-ux-state~=changed-done] can be used.

input — prop#

The input prop controls whether or not an <input> element is rendered within the resulting markup. This can be useful when a <form> is being used. The <input> element will be hidden, but will always have its value aligned with the value of the <TxRegionsInput> input element. Additionally, if the value of the input prop is a string, it will be used as the name of the input.

If there are violations, the <input> will have a custom validity message set to the value of the violations. If there is a wrapper <form> element, the custom validity message will cause form.checkValidity() to return false.

setInputProps — prop#

The setInputProps allows passing any properties to the <input> element. For instance, the following would cause the <input> to to have the name="some_form_name and data-form-validation="true" attributes.

<TxRegionsInput
    input="some_form_name"
    setInputProps={{ 'data-form-validation': true }}
/>

This prop must be used in tandem with the input prop, otherwise the <input> element will not be rendered.

setWrapperProps — prop#

The setWrapperProps allows passing any properties to the wrapper <div>. For instance, the following would cause the wrapper <div> to to have the CSS class the-wrapping-div.

<TxRegionsInput
    setWrapperProps={{ className: 'the-wrapping-div' }}
/>

setEditableProps — prop#

The setEditableProps allows passing any properties to the contenteditable <div>. For instance, the following would cause the inner <div> to to have the CSS class the-editable-div and the data-* attribute data-form-step="1".

<TxRegionsInput
    setEditableProps={{
        className: 'the-editable-div',
        'data-form-step': 1
    }}
/>

Styling#

<TxRegionsInput> does not ship with any styling, at all. However, one of the core objectives of the implementation is for the component to be very easy to style.

The invalidClassName, markInvalid and markers props are the only props, other than custom validators, that directly affect styling. These props affect the styling of the text value that has been entered.

To affect the styling of the component, as a whole, the setWrapperProps and setEditableProps props can be used. These props can be set to objects with className and / or style properties. See setWrapperProps and setEditableProps

Additionally, the data-violations and data-ux-state can be leveraged for styling pruposes. This is the approach taken for the Validation messages example.

invalidClassName — prop#

  • Type: string
  • Default: "txr-invalid"

By default, invalid characters are dressed with the CSS class txr-invalid. This CSS class name is configurable via the invalidClassName prop. This applies to violations from the general validation props (see Built-in validation props for details) and from custom validators that don't specify a className (see Custom validation).

Related:

markInvalid — prop#

  • Type: bool
  • Default: true

This toggles whether invalid characters are marked with a CSS class or not. When true, invalid characters are marked with a CSS clss, when false, they are not.

Related:

markers — prop#

  • Type: Function | Array<Function>
  • Default: null

The markers prop allows portions of the entered value (or all of it) to be marked with CSS classes without being subjected to validation. For instance, the following would mark URLs in the entered value:

import TxRegionsInput, { markers } from 'txregions';
<TxRegionsInput
    markers={markers.urls}
/>

This will mark URLs in the entered value with the default CSS class associated with URLs, which is txr-url.

classNames — export#

The classNames export can be used to globally override the CSS class the built-in markers apply.

The following will set this to a custom CSS class, custom-url-classname, globally:

import TxRegionsInput, { classNames, markers } from 'txregions';
 
classNames.url = 'custom-url-classname';

Marker specific className#

To override the CSS class the built-in markers apply on a local basis, the built-in markers are each accompanied by a corresponding prop. This prop can be used to customize the CSS class the built-in marker applies to the text it mark.

For instance, the classEmail prop will override the default CSS class markers.email applies. So, instead of txr-email, the value of classEmail will be used.

Markers#

As noted above, markers are a feature which allows portions of the text value to be marked with CSS classes. For example, markers.urls marks URLs within the text value with the txr-url CSS class (by default).

Markers decouple marking text with a CSS class from the validation, allowing any text portion to be marked with any CSS class without having an impact on the validity state.

dynamicMarkers — prop#

If the markers will change during the life of the component, then the prop dynamicMarkers needs to be set to true.

Built-in markers#

import { markers } from 'txregions';

The following markers are built-in:

  • markers.email
    • Marks email addresses
    • Default CSS class: txr-email
    • classNames.email global override
    • classEmail local override
  • markers.nonEmail
    • Marks anything but email addresses
    • Default CSS classes: txr-non-email and txr-invalid
    • classNames.nonEmail global override
    • classNonEmail local override
  • markers.urls
    • Marks email addresses
    • Default CSS class: txr-url
    • classNames.url global override
    • classUrl local override
  • markers.nonUrl
    • Marks anything but URLs
    • Default CSS classes: txr-non-url and txr-invalid
    • classNames.nonUrl global override
    • classNonUrl local override
  • markers.nonDigits
    • Marks anything but numbers
    • Default CSS classes: txr-non-digit and txr-invalid
    • classNames.nonDigits global override
    • classNonDigits local override
  • markers.nonEnNumeric
    • Marks anything but numbers of the format 1,234.56
    • Default CSS classes: txr-non-numeric and txr-invalid
    • classNames.nonNumeric global override
    • classNonNumeric local override
  • markers.nonNumeric
    • Alias for markers.nonEnNumeric
  • markers.markNonEuNumeric
    • Marks anything but numbers of the format 1.234,56
    • Default CSS classes: txr-non-numeric and txr-invalid
    • classNames.nonNumeric global override
    • classNonNumeric local override
  • markers.nonInt
    • Marks anything but negative or unsigned numbers
    • Default CSS classes: txr-non-int and txr-invalid
    • classNames.nonInt global override
    • classNonInt local override
  • markers.nonUint
    • Marks anything but unsigned integers
    • Default CSS classes: txr-non-uint and txr-invalid
    • classNames.nonUint global override
    • classNonUint local override

Custom markers#

Custom markers can be used, in addition to the built-in markers.

Custom markers are just functions that take in, among other things, the current value of the text and a RangeMarker. The RangeMarker, which is just a function, is the work-horse of the custom marker. With it, portions of the text are designated to have CSS classes associated with them.

The signature of the RangeMarker function is:

type RangeMarker = (start: int, end: int, className: string) => void;

The signature of a custom marker:

function(text: string, markRange: RangeMarker, instance: TxRegionsInput, classNames: {[string]: string}): void

To break this down a bit more:

  • text: string
    • The current value of the TxRegionsInput instance
  • markRange: RangeMarker
    • The workhorse of custom markers. This function is how text is marked with a CSS class. It takes in a start index, end index, and the CSS class to associate the text within those two indices with.
  • instance: TxRegionsInput
    • The TxRegionsInput instance. This is the gateway for using custom props to parameterize which CSS class a marker applies to the marked text. E.g. instance.props.classEmail is used for by the markers.email built-in marker.
  • classNames: {[string]: string}
    • The classNames export that allows global overriding of CSS classes the built-in markers apply. Custom CSS classes can also be added to this object. These will then be available to every invocation of custom markers.

Example custom marker#

As an example, let's put together a marker that marks even digits with the CSS class even-digit.

First, we write a test function that lets us know whether a character is an even number or not:

const isEvenNumber = char => char % 2 === 0;

Next, we write our custom marker function. The only parameters we need are the current text and the RangeMarker function.

const CSS_CLASS = 'even-digit';
 
function evenDigitMarker(text, markRange) {
    const len = text.length;
    for (let i = 0; i < len; i++) {
        if (isEvenNumber(text[i])) {
            markRange(i, i + 1, CSS_CLASS);
        }
    }
}

Then, we would use it via:

<TxRegionsInput
    markers={evenDigitMarker}
/>

If we wanted to go hardcore and allow the CSS class to be customized by a classEvenDigit custom prop, we could do something like the following:

const DEFAULT_CSS_CLASS = 'even-digit';
 
function evenDigitMarker(text, markRange, instance) {
    const cssClass = instance.props.classEvenDigit || DEFAULT_CSS_CLASS;
    const len = text.length;
    for (let i = 0; i < len; i++) {
        if (isEvenNumber(text[i])) {
            markRange(i, i + 1, cssClass);
        }
    }
}

Then, to use our newly implemented awesomeness:

<TxRegionsInput
    markers={evenDigitMarker}
    classEvenDigit="omg-even-digit"
/>

The above describes how to create custom markers as functions. This is a very expressive approach. But, sometimes it's possible to express the marker as a regular expression. In these scenarios, there are two utility functions that may be of use:

getMatchMarker — utility function#

When the desired marking functionality can be captured as a regular expression and we want to mark matching text, then getMatchMarker is our friend. It creates a marker function from a RegExp and marks all text that matches the RegExp (so long as the global flag is used).

The signature of getMatchMarker:

type Options = {
    classNameFromProps?: string,
    classNameFromClassNames?: string,
    fallbackClassName?: string
};
 
getMatchMarker(rx: RegExp, options: string | Options): CustomMarker

The options parameter can be either a string, indicating a static CSS class name to mark the matching characters with, or an object with one or more of the properties:

  • classNameFromProps - The name of the custom prop to use as the CSS class name, see Marker specific className
  • classNameFromClassNames - The name of the property on the classNames export, see classNames export
  • fallbackClassName - The CSS class to mark matching text with if either of the two previous properties are not present or do not yield a className

To revisit our even digit example, the following would also do the trick:

import { getMatchMarker } from 'txregions';
 
const evenDigitMarker = getMatchMarker(/[02468]/g, 'even-digit');

Or, to have it use a custom prop classEvenDigit and to fallback to even-digit for the CSS class:

import { getMatchMarker } from 'txregions';
 
const evenDigitMarker = getMatchMarker(/[02468]/g, {
    classNameFromProps: 'classEvenDigit',
    fallbackClassname: 'even-digit'
});

getInverseMarker — utility function#

If, on the other hand, we have a regular expression and we want to mark the text that does not match, then getInverseMarker is the way to go.

The signature is identical to getMatchMarker, but it yields the inverse marker. See getMatchMarker utility function.

Custom validators#

Custom validators can be defined. The built-in validators are handy (see the preset prop), but for customized validation the validators prop can be used.

There are several forms custom validators can take:

  • RegExp
  • Function
  • type ValidatorSpec = { [string]: RegExp | Function, mark?: bool, className?: string }
  • Array< RegExp | Function | ValidatorSpec >

RegExp — custom validators#

<TxRegionsInput
    validators={/\d+/}
/>

The first occurence of the RegExp is considered valid; all other characters are marked as invalid with the CSS class txr-invalid, which can be customized via the invalidClassName prop.

Providing a RegExp, directly, will result in "general" violations. See data-violations HTML attribute.

Function — custom validators#

type FunctionValidator = (text: string, markRange?: RangeMarker) => boolean | string;

Validator functions offer an expressive means of validating the input value. Validator functions serve two roles:

  • Provide [data-violations] attribute values. The is done via the return value.
  • Mark portions of the text with CSS classes. This is done via the markRange function.

Violations Function custom validators#

In it's simplest form, the validator function can return a boolean which, when true, indicates the text is invalid. This will result in a "general" violation (in addition to any other violations found, e.g. via the built-in validator props, etc.).

<TxRegionsInput
    validators={text => text.length > SOME_MAX_LENGTH}
/>

In a more advanced form, the validator function can return a string that will be inserted into the [data-violations] attribute value.

For example, assuming we have an object userPrefs with minLength and maxLength set to some meaningful user defined values, the following would provide expressive [data-violations]:

<TxRegionsInput
    validators={text => {
        const violations = [];
        if (text.length < userPrefs.minLength) {
            violations.push('minLength');
        }
        if (text.length > userPrefs.maxLength) {
            violations.push('maxLength');
        }
        if ((/fuck|shit|damn|etc.../i).test(text)) {
            violations.push('foul-language');
        }
        // etc... 
        return violations.join(' ');
    }}
/>

To elaborate, if userPrefs.minLength === 64 and input text is "Damn, so dope!", then the [data-violations] attribute value will be "minLength foul-language" on the wrapper <div>.

See data-violations HTML attribute.

Marking CSS classes Function custom validators#

The second parameter to the validator function, markRange, allows all or parts of the text to be marked with CSS classes.

type RangeMarker = (start: int, end: int, className: string) => void;

The markRange paramter allows any subset of the text, or the full text, to be marked with any CSS class. Any CSS class can be used, and the props defined on the <TxRegionsInput> have no affect.

For intance, markRange(0, 5, 'omg-the-start') would mark the first five characters of the input text with the CSS class omg-the-start.

It is possible to overlap marked regions. For instance, characters 0-9 can be marked with a CSS class rendering italic text and characters 5-14 can be marked with a CSS class rendering bold text. The characters 5-9 will be both bold and italic.

For example, the validator below expects the input text to be the alphabet, in order, and if any letter is not in place the character in that position is marked with the CSS class invalid-letter. If there were any invalid letters found or if the alphabet is not complete, a violation value is returned.

<TxRegionsInput
    validators={(text, markRange) => {
        const letters = 'abcdefghijklmnopqrstuvwxyz';
        const lower = text.toLowerCase();
        let invalid = false;
        let i = 0;
        for (; i < letters.length; i++) {
            if (lower.length < i) {
                return `incomplete-alphabet ${invalid ? 'invalid-letters' : ''}`;
            }
            if (lower[i] !== letters[i]) {
                invalid = true;
                if (markRange) {
                    markRange(i, i+1, 'invalid-letter');
                }
            }
        }
        return invalid ? 'invalid-letters' : false;
    }}
/>

Note: The markRange parameter is not always provided. See line 13. This is because violations are calculated in two phases. Addressing this, so violations are calculated in only one phase, is the subject of future work.

ValidatorSpec — custom validators#

The ValidatorSpec is an object composed of name/value pairs where the name is the violation to be used and the value is either a RegExp or a Function.

For instance:

<TxRegionsInput
    validators={/\d+/}
/>
 
<TxRegionsInput
    validators={{ digits: /\d+/ }}
/>
 
<TxRegionsInput
    validators={{ 'whoa-too-long': text => text.length > 100 }}
/>

In the first instance, the data-violations will be "general". In the second, they will be "digits". In the third, violations will be "whoa-too-long".

This really shines when regular expressions are used for the custom validator because otherwise the violation will always be "general".

With Functions, the name is only used as the violation if the return value is a true.

If you're feeling crazy, more than one name/value pair can be defined on the ValidatorSpec. A character must be considered valid by both values in order to be considered valid, in general.

<TxRegionsInput
    validators={{ digits: /\d+/, words: /\w+/ }}
/>

Special properties ValidatorSpec#

There are a couple of special properties on these ValidatorSpecs.

  • mark: boolean — When the value is a RegExp, mark indicates whether or not the invalid characters should be marked with a CSS class. Default: true. See invalidClassName prop.
  • className: string — When the value is a RegExp, className defines the CSS class name invalid characters are marked with. When set, this overrides the invalidClassName prop. Default: null.

Array<RegExp|Function|ValidatorSpec> — custom validators#

This allows any combination of RegExp, Function or ValidatorSpec custom validators.

<TxRegionsInput
    validators={[
        /\d+/,
        text => text.length > 100,
        { digits: /\d+/, mark: false },
        { upperLetters: /[A-Z]+/, className: 'invalid' }
    ]}
/>

Props index#

defaultValue Type string
Default ""
Description The initial value of the input. Applies only to uncontrolled components.
Related defaultValue — prop
Dynamic highlighting
dynamicMarkers Type boolean
Default null
Description When true, the markers prop is checked during shouldComponentUpdate.
Related dynamicMarkers — prop
input Type boolean | string
Default null
Description Indicates whether a HTMLInputElement should be inserted into the DOM, within the wrapping div of the component instance.
Related input — prop
setInputProps — prop
invalidClassName Type string
Default null
Description Overrides the default CSS class invalid characters are marked with.
Related invalidClassName — prop
markers Type Function | Function[]
Default undefined
Description Allows portions of the text value to be marked with CSS classes; supports both built-in markers and custom markers.
Related markers — prop
Markers
Highlight URLs and email addresses
Dynamic highlighting
markInvalid Type boolean
Default null
Description Toggles whether invalid characters are marked with a CSS class or not.
Related markInvalid — prop
maxHistory Type int
Default 100
Description The number of changes to keep in the "undo" history.
Related N/A
maxLength Type int
Default null
Description Establishes a maximum text length for the value. If the value exceeds this length, it is considered invalid with a violation of "maxLength".
Related maxLength — prop
Min and max lengths
Validation messages — appear after blur
minLength Type int
Default null
Description Establishes a minimum text length for the value. If the value does not meet this requirement, it is considered invalid with a violation of "minLength".
Related minLength — prop
Min and max lengths
Validation messages — appear after blur
onEnterKeyDown Type Function
Default null
Description Callback for the Enter keydown event. Invoked with a rich data object.
Related onEnterKeyDown — prop
onRawChange Type Function
Default null
Description Callback for changes in the input value. This prop, along with the value prop, should be used for creating controlled inputs.
Related onRawChange — prop
Controlled input
onUpdate Type Function
Default null
Description Callback for updates in the rendered value of the input.
Related onUpdate — prop
pattern Type string
Default null
Description Emulates the pattern attribute of <input> elements.
Related pattern — prop
placeholder Type string
Default ""
Description The placeholder text to show when the input value is empty.
Related N/A
preset Type string
Default null
Description Enables one of the built-in validators.
Related preset — prop
Email address input — preset="email"
URL input — preset="url"
Numeric inputs
Validation messages — appear after blur
required Type boolean
Default null
Description Indicates whether the input must have a non-whitespace value to be considered in a valid state.
Related required — prop
Validation messages — appear after blur
setEditableProps Type Object
Default null
Description Allows passing any properties to the contenteditable <div> used as the text input.
Related setEditableProps — prop
Styling
setInputProps Type Object
Default null
Description Allows passing any properties to the <input>.
Related setInputProps — prop
input — prop
setWrapperProps Type Object
Default null
Description Allows passing any properties to the wrapper <div>.
Related setWrapperProps — prop
Styling
spellCheck Type boolean
Default false
Description Passed to the spellCheck prop on the contenteditable <div> used as the text input.
Related N/A
validators Type RegExp | Function | ValidatorSpec | Array
Default null
Description Allows custom validators to be defined.
Related Custom validators
value Type string
Default null
Description Sets the value of controlled component instances. Should be used in combination with onRawUpdate.
Related value — prop