1. @idui/react-mask-input
React MaskInput Component
@idui/react-mask-input
Package: @idui/react-mask-input
Created by: id-ui
Last modified: Tue, 05 Apr 2022 19:17:37 GMT
Version: 1.2.1
License: MIT
Downloads: 102
Repository: https://github.com/id-ui/react-mask-input

Install

npm install @idui/react-mask-input
yarn add @idui/react-mask-input

MaskInput React Component

NPM
Size
JavaScript Style Guide
Coverage Status
LICENSE

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)

 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

 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

 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>;
}

See more details in storybook

License

MIT © [email protected]

Dependencies

RELATED POST

10 Must-Know Windows Shortcuts That Will Save You Time

10 Must-Know Windows Shortcuts That Will Save You Time

Arrays vs Linked Lists: Which is Better for Memory Management in Data Structures?

Arrays vs Linked Lists: Which is Better for Memory Management in Data Structures?

Navigating AWS Networking: Essential Hacks for Smooth Operation

Navigating AWS Networking: Essential Hacks for Smooth Operation

Achieving Stunning Visuals with Unity's Global Illumination

Achieving Stunning Visuals with Unity's Global Illumination

Nim's Hidden Gems: Lesser-known Features for Writing Efficient Code

Nim's Hidden Gems: Lesser-known Features for Writing Efficient Code