TextMaskInput

This is a simple text masking component. In other words, a text input with a controlled value. i.e. credit cards, phone numbers, dates, etc...

Props

className

String

disabled

Bool

error

Bool

forwardedRef

Custom

guide

Bool

true

mask

Array<Class(RegExp) │ string> │ Function

required

name

String

required

onChange

Func

required

placeholderChar

String

showMask

Bool

true

size

'small' │ 'medium' │ 'large'

'large'

value

string │ number

Examples

Default Usage

<State initial={{ value: '' }}>
  {({ state, setState }) => (
    <TextMaskInput
      mask={[
        '(',
        /[1-9]/,
        /[1-9]/,
        /[1-9]/,
        ')',
        ' ',
        /[1-9]/,
        /[1-9]/,
        /[1-9]/,
        '-',
        /[1-9]/,
        /[1-9]/,
        /[1-9]/,
        /[1-9]/,
      ]}
      name="myMaskedInput"
      onChange={(name, value) => setState({ value })}
      value={state.value.replace(/\D+/g, '')}
    />
  )}
</State><State initial={{ value: '' }}>
  {({ state, setState }) => (
    <TextMaskInput
      mask={[
        '(',
        /[1-9]/,
        /[1-9]/,
        /[1-9]/,
        ')',
        ' ',
        /[1-9]/,
        /[1-9]/,
        /[1-9]/,
        '-',
        /[1-9]/,
        /[1-9]/,
        /[1-9]/,
        /[1-9]/,
      ]}
      name="myMaskedInput"
      onChange={(name, value) => setState({ value })}
      value={state.value.replace(/\D+/g, '')}
    />
  )}
</State>

TextMaskInput

.css-1r0pe6c{color:inherit;-webkit-text-decoration:none;text-decoration:none;}.css-1r0pe6c:hover{-webkit-text-decoration:underline;text-decoration:underline;}Props

Examples

Default Usage

Props