MaskInput

Format user input according to a mask pattern

Import: import { MaskInput } from 'react-native-mantine';

Usage

import { MaskInput } from 'react-native-mantine';

// Tokens: # digit, a letter, * alphanumeric
<MaskInput
  label="Phone"
  mask="+1 (###) ###-####"
  value={phone}
  onChangeText={setPhone}
  onChangeRaw={(raw, masked) => console.log(raw)}
  onComplete={(masked, raw) => console.log('done', raw)}
/>

// Mask skeleton as placeholder, clear incomplete value on blur
<MaskInput mask="##/##/####" showMask slotChar="_" autoClear />

Props

Prop	Type	Default	Description
`mask` (required)	`string \| Array<string \| RegExp>`		Mask pattern, e.g. "+1 (###) ###-####". Tokens: # digit, a letter, * alphanumeric
`tokens`	`MaskInputTokens`		Custom token definitions, merged with defaults (# digit, a letter, * alphanumeric)
`slotChar`	`string`	`"_"`	Character used to render empty mask slots in the placeholder
`showMask`	`boolean`	`false`	Displays the mask skeleton as placeholder when the input is empty
`autoClear`	`boolean`	`false`	Clears the value on blur if the mask is not completely filled
`value`	`string`		Masked value for controlled component
`defaultValue`	`string`		Default value for uncontrolled component
`onChangeText`	`(masked: string) => void`		Called with the masked value
`onChangeRaw`	`(raw: string, masked: string) => void`		Called with the raw (unmasked) and masked values
`onComplete`	`(masked: string, raw: string) => void`		Called when the mask is completely filled
`label`	`React.ReactNode`		Input label, inherited from TextInput
`error`	`React.ReactNode`		Error message, inherited from TextInput
`applyMask`	`(input, mask, tokens?) => { masked, raw, complete }`		Exported helper that applies a mask to an arbitrary string
`getMaskPlaceholder`	`(mask, slotChar?, tokens?) => string`		Exported helper that builds the mask skeleton placeholder

Source on GitHub · npm