Package Exports

@idui/react-mask-input

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@idui/react-mask-input) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

MaskInput React Component

Install

npm install --save @idui/react-mask-input

yarn add @idui/react-mask-input

Advantages

Fully customizable, smart
Adjusts entered/inserted value to the mask
Able to define mask by custom tokens
Accepts custom validation applied before setting value
Jumps over tokens on RightArrow/LeftArrow keyDown and during input/erasing
Able to show maskPlaceholder and value in different colors

See props in Docs

Basic Example

import React from 'react'
import MaskInput from '@idui/react-mask-input'

function Example() {
    const [value, setValue] = useState('');

    return <MaskInput  
        value={value} 
        onChange={setValue}
        mask="9999 9999 9999 9999"
        maskPlaceholder="0000 0000 0000 0000"
        fitWidthToMask={false} // whether resize input to mask width or not, default false
        placeholder="Enter Card Number"
    />;
}

With custom validation (date)

Live Example

import React from 'react'
import MaskInput from '@idui/react-mask-input'

const dateRegex = /^(0[1-9]|[1-2]\d|3[0-1])\/(0[1-9]|1[0-2])\/[1-9]\d{3}$/;
const validDate = '01/01/2020';

const validateMaskedValue = (currentMaskedValue) =>
    dateRegex.test(
        currentMaskedValue + validDate.substring(currentMaskedValue.length)
    );

function DateValidation() {
    const [value, setValue] = useState('');

    return <MaskInput  
        value={value} 
        onChange={setValue}
        mask="99/99/9999"
        maskPlaceholder="DD/MM/YYYY"
        validateMaskedValue={validateMaskedValue}
    />;
}

Custom tokens

Live Example

import React from 'react'
import MaskInput from '@idui/react-mask-input'

function Example() {
    const [value, setValue] = useState('');

    return <MaskInput  
        value={value} 
        onChange={setValue}
        tokens={{
            0: '$',
            2: '.',
        }}
        defaultSymbolPlaceholder=" "
    />;
}

Styling

You should apply styles to custom container
Live Example

import React from 'react'
import styled from 'styled-components';
import { ifProp } from 'styled-tools';
import MaskInput, {Placeholder} from '@idui/react-mask-input'

const Container = styled.div`
  height: 40px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 5px;
  border: 1px solid #b4b4b4;
  color: #313131;
  margin-bottom: 10px;
  &:focus-within {
    border: 1px solid #a569ed;
  }
  ${Placeholder} {
    color: ${ifProp({disabled: true}, '#EFEFEF', '#B4B4B4')};
  }
`;

function Example() {
    const [value, setValue] = useState('');

    return <Container>
        <MaskInput
            value={value}
            onChange={setValue}
            mask="9999 9999 9999 9999"
            maskPlaceholder="0000 0000 0000 0000"
            placeholder="Enter Card Number"
        />
    </Container>;
}

JSPM

@idui/react-mask-input