Non-Partisan Magicians

    @idui/react-mask-input
    TypeScript icon, indicating that this package has built-in type declarations

    1.2.1 • Public • Published

    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 © kaprisa57@gmail.com

    Install

    npm i @idui/react-mask-input

    DownloadsWeekly Downloads

    58

    Version

    1.2.1

    License

    MIT

    Unpacked Size

    22.4 kB

    Total Files

    5

    Last publish

    Collaborators

    • kaprisa57