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

Name	Type	Required	Default	Description
numInputs	number	true	4	Number of OTP inputs to be rendered.
onChange	function	true	console.log	Returns OTP code typed in inputs.
separator	component	false	[space]	Provide a custom separator between inputs by passing a component. For instance, <span>-</span> would add - between each input
containerStyle	style (object) / className (string)	false	none	Style applied or class passed to container of inputs.
inputStyle	style (object) / className (string)	false	none	Style applied or class passed to each input.
focusStyle	style (object) / className (string)	false	none	Style applied or class passed to inputs on focus.
isDisabled	boolean	false	false	Disables all the inputs.
disabledStyle	style (object) / className (string)	false	none	Style applied or class passed to each input when disabled.
error	boolean	false	false	Indicates there is an error in the inputs.
errorStyle	style (object) / className (string)	false	none	Style applied or class passed to each input when errored.
shouldAutoFocus	boolean	false	false	Auto focuses input on inital page load.
isInputNum	boolean	false	false	Restrict input to only numbers.
placeholder	string	false	none	Placeholder for each input
errorText	ReactNode	false	none	Error message to show
groupSeparator	ReactNode	false	none	React element to show at groupSeparatorPositions
groupSeparatorPositions	Object	false	{}	Positions when to show groupSeparator
inputPropsMap	Object	false	{}	An object with props specifically for individual inputs
defaultValues	Array	false	[]	An array of default values for inputs
valueEnteredStyle	Object	false	{}	Styles applied on value-entered inputs