UNPKG

2.11 kBTypeScriptView Raw
1import * as React from "react";
2
3export interface Selection {
4 start: number;
5 end: number;
6}
7
8export interface InputState {
9 value: string;
10 selection: Selection | null;
11}
12
13export interface BeforeMaskedStateChangeStates {
14 previousState: InputState;
15 currentState: InputState;
16 nextState: InputState;
17}
18
19export type Props = Omit<React.InputHTMLAttributes<HTMLInputElement>, "children"> & {
20 /**
21 * Mask string. Format characters are:
22 * * `9`: `0-9`
23 * * `a`: `A-Z, a-z`
24 * * `\*`: `A-Z, a-z, 0-9`
25 *
26 * Any character can be escaped with backslash, which usually will appear as double backslash in JS strings.
27 * For example, German phone mask with unremoveable prefix +49 will look like `mask="+4\\9 99 999 99"` or `mask={"+4\\\\9 99 999 99"}`
28 */
29 mask: string | Array<(string | RegExp)>;
30 /**
31 * Character to cover unfilled editable parts of mask. Default character is "_". If set to null, unfilled parts will be empty, like in ordinary input.
32 */
33 maskChar?: string | null | undefined;
34 maskPlaceholder?: string | null | undefined;
35 /**
36 * Show mask even in empty input without focus.
37 */
38 alwaysShowMask?: boolean | undefined;
39 /**
40 * Use inputRef instead of ref if you need input node to manage focus, selection, etc.
41 */
42 inputRef?: React.Ref<HTMLInputElement> | undefined;
43 /**
44 * In case you need to implement more complex masking behavior, you can provide
45 * beforeMaskedStateChange function to change masked value and cursor position
46 * before it will be applied to the input.
47 *
48 * * previousState: Input state before change. Only defined on change event.
49 * * currentState: Current raw input state. Not defined during component render.
50 * * nextState: Input state with applied mask. Contains value and selection fields.
51 */
52 beforeMaskedStateChange?(states: BeforeMaskedStateChangeStates): InputState;
53
54 children?: (inputProps: any) => React.ReactNode;
55};
56
57export class ReactInputMask extends React.Component<Props> {
58}
59
60export default ReactInputMask;