input-masked-react

A fully customizable masked input component for the web built with React. Inspired by devfolioco/react-otp-input

Installation

yarn add input-masked-react

Basic usage:

import React from 'react';
import MaskedInput from 'input-masked-react';

const App = props => 
  <MaskedInput
    numInputs={4}
    onChange={otp => console.log(otp)}
    separator={<span>&nbsp;&nbsp;</span>}
  />

Edit on CodeSandbox

With styles applied to each input:

import React from 'react';
import MaskedInput from 'input-masked-react';

const App = props => 
  <MaskedInput
    numInputs={4}
    onChange={otp => console.log(otp)}
    inputStyle={{
      border: 0,
      borderBottom: "1px solid #DFE0E3",
      width: 20,
      height: 30
    }}
  />

Edit on CodeSandbox

When inputs are disabled:

import React from 'react';
import MaskedInput from 'input-masked-react';

const App = props => 
  <MaskedInput
    numInputs={4}
    onChange={otp => console.log(otp)}
    isDisabled
    disabledStyle={{
      background: 'red'
    }}
  />

Edit on CodeSandbox

Force inputs to be numeric:

import React from 'react';
import MaskedInput from 'input-masked-react';

const App = props => 
  <MaskedInput
    numInputs={4}
    onChange={otp => console.log(otp)}
    isNumeric
  />

Edit on CodeSandbox

Add styles when inputs are focused:

import React from 'react';
import MaskedInput from 'input-masked-react';

const App = props => 
  <MaskedInput
    numInputs={4}
    onChange={otp => console.log(otp)}
    focusStyle={{
      outline: 0
    }}
  />

Edit on CodeSandbox

With placeholder for each input:

import React from 'react';
import MaskedInput from 'input-masked-react';

const App = props => 
  <MaskedInput
    numInputs={4}
    onChange={otp => console.log(otp)}
    inputStyle={{
      border: 0,
      borderBottom: "1px solid #DFE0E3",
      width: 20,
      height: 30
    }}
    placeholder='Y'
  />

Edit on CodeSandbox

With group separation:

import React from 'react';
import MaskedInput from 'input-masked-react';

const App = props => 
  <MaskedInput
    numInputs={8}
    onChange={otp => console.log(otp)}
    inputStyle={{
      border: 0,
      borderBottom: "1px solid #DFE0E3",
      width: 20,
      height: 30
    }}
    placeholder='Y'
    groupSeparatorPositions={[1, 3]}
    groupSeparator={<div style={{ width: 15 }} />}
  />

Edit on CodeSandbox

With individual input props:

import React from 'react';
import MaskedInput from 'input-masked-react';

const App = props => 
  <MaskedInput
    numInputs={8}
    onChange={otp => console.log(otp)}
    inputStyle={{
      border: 0,
      borderBottom: "1px solid #DFE0E3",
      width: 20,
      height: 30
    }}
    inputPropsMap={{
      0: { placeholder: "D", style: { width: 30 } },
      1: { placeholder: "D" },
      2: { placeholder: "M" },
      3: { placeholder: "M" },
      4: { placeholder: "Y" },
      5: { placeholder: "Y" },
      6: { placeholder: "Y" },
      7: { placeholder: "Y" },
    }}
    groupSeparatorPositions={[1, 3]}
    groupSeparator={<div style={{ width: 15 }} />}
  />

Edit on CodeSandbox

With error:

import React from 'react';
import MaskedInput from 'input-masked-react';

const App = props => 
  <MaskedInput
    numInputs={4}
    onChange={otp => console.log(otp)}
    inputStyle={{
      border: 0,
      borderBottom: "1px solid #DFE0E3",
      width: 20,
      height: 30
    }}
    error
    errorText={
      <div style={{ color: "red", marginTop: 10 }}>
        An error has occured!
      </div>
    }
  />

Edit on CodeSandbox

With defaultValues:

import React from 'react';
import MaskedInput from 'input-masked-react';

const App = props => 
  <MaskedInput
    numInputs={4}
    onChange={otp => console.log(otp)}
    inputStyle={{
      border: 0,
      borderBottom: "1px solid #DFE0E3",
      width: 20,
      height: 30
    }}
    defaultValues={'1000'.split('')}
  />

Edit on CodeSandbox

With valueEnteredStyle:

import React from 'react';
import MaskedInput from 'input-masked-react';

const App = props => 
  <MaskedInput
    numInputs={4}
    onChange={otp => console.log(otp)}
    inputStyle={{
      border: 0,
      borderBottom: "1px solid #DFE0E3",
      width: 20,
      height: 30
    }}
    valueEnteredStyle={{
      borderBottom: '2px solid blue'
    }}
    focusStyle={{
      outline: 0
    }}
  />

Edit on CodeSandbox

Use cases

For Date Of Birth:

import React from 'react';
import MaskedInput from 'input-masked-react';

const App = props => 
  <MaskedInput
    numInputs={8}
    inputStyle={{
      border: 0,
      borderBottom: "1px solid #DFE0E3",
      width: 20,
      height: 30
    }}
    inputPropsMap={{
      0: { placeholder: "D" },
      1: { placeholder: "D" },
      2: { placeholder: "M" },
      3: { placeholder: "M" },
      4: { placeholder: "Y" },
      5: { placeholder: "Y" },
      6: { placeholder: "Y" },
      7: { placeholder: "Y" }
    }}
    groupSeparatorPositions={[1, 3]}
    groupSeparator={<div style={{ width: 15 }} />}
    onChange={data => console.log(data)}
  />

Edit on CodeSandbox

For OTP:

import React from 'react';
import MaskedInput from 'input-masked-react';

const App = props => 
  <MaskedInput
    numInputs={4}
    inputStyle={{
      border: 0,
      borderBottom: "1px solid #DFE0E3",
      width: 20,
      height: 30
    }}
    separator={<span>&nbsp;&nbsp;&nbsp;</span>}
    placeholder={"•"}
    onChange={data => console.log(data)}
  />

Edit on CodeSandbox

API