react-maskinput
Version:
React mask input component. Allow to input formatted values with fixed length or apply custom formtatting function, to format values with any length
74 lines (73 loc) • 2.86 kB
TypeScript
import * as React from 'react';
import { IInputState, IInputValue, IMaskItem, ISelectRange } from 'input-core';
interface IInputProps {
value?: string;
mask?: string;
maskChar?: string;
maskFormat?: Array<IMaskItem>;
maskString?: string;
reformat?: (params: {
value: Array<IInputValue> | string;
input?: string;
selection: ISelectRange;
}) => IInputState;
defaultValue?: string;
alwaysShowMask?: boolean;
showMask?: boolean;
onChange?: (e: React.SyntheticEvent) => void;
onValueChange?: (params: {
maskedValue: string;
value: string;
}) => void;
getReference?: (el: HTMLInputElement) => void;
onFocus: (e: React.FocusEvent) => void;
onBlur: (e: React.FocusEvent) => void;
}
/**
* React-MaskInput component
* Params:
* `mask`: String. Format:
* 0 — any number 0-9
* * — any symbol
* a — A-Z, a-z
* q — "q" letter, 2 — "2" letter etc.
* \a — "a" letter
* default is undefined
*
* [function] `reformat`: user function, if you want use custom reformat logic. It's userfull for numeric inputs.
* If reformat defined mask'll be ignored. Reformat function must receive object with several fields:
* function reformat({data: data, selection: {start, end}, input}) {
* // realisation
*
* return {
* [any] value: value that store and calling in input core funcitons (such as reformat). value may have any format,
* [String] visibleValue: value that displayed to user in input if showMask is false,
* [String] maskedValue: value that displayed to user in input if showMask is true,
* [{[integer] start, [integer] end}] selection: {start, end} — new selection range
* }
* }
*
* if `reformat` and `mask` is undefined, input allow to enter any values.
*
* You can define custom mask by passing `maskFormat`. This prop must be an array,
* each object in array have several fields:
* str: matched char for mask
* regexp: validation rule as regexp
* type: special
*
* `maskChar`: Character to cover unfilled editable parts of mask. Default value is ''.
* `maskString`: String to cover unfilled editable parts of mask. Default is undefined. If maskString define maskChar ignored.
*
* showMask: show mask in input. It's possible only if mask have not cyclic. Default value = false
* alwaysShowMask: show mask when input inactive
*
* Callbacks:
* onValueChange(event). event is:
* maskedValue: masked value,
* value: value without nessesary mask
* getReference: callback to get input ref
* onChange(event) where event is a regular React.SyntheticEvent. Using this event you can get access to HTMLElement directly
* All other props'll passed to input directly
*/
declare function MaskInput(props: IInputProps): JSX.Element;
export default MaskInput;