react-codes-input

A react component for PIN, verify code and passcode entering. Online demo examples.

Online Demo

Codesandbox Examples

Examples

Version of `16.8.6` or higher of react and react-dom is required.

  "peerDependencies": {
    "react": ">= 16.8.6",
    "react-dom": ">= 16.8.6"
  }

Installation

npm install react-codes-input --save

By CDN (starting from v2.2.0)

<head>
 ...
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/react-codes-input/2.2.0/react-codes-input.min.css"/>
</head>
<body>
 <div id="root"></div>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/react-codes-input/2.2.0/react-codes-input.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
 <script type="text/babel">
    const App = React.memo(() => {
      return (<ReactCodesInput .../>)
    });
    ReactDOM.render(<App />, document.getElementById('root'));
 </script>
</body>

Donation

Thanks for donating me a donut! ⁄(⁄ ⁄•⁄ω⁄•⁄ ⁄)⁄

Browser support

Tested on ~~IE9+~~ IE10+ and Chrome and Safari(10.0.3)

This library uses require attribute of html input element, which not support IE9 from v2.1.0

Docs

Props		Type	Description	Default
initialFocus	Opt	Bool	Options are ['false', 'true']	false
wrapperRef	Opt	React Ref		none
codeLength	Opt	Number		6
id	Opt	Str		random ID
onChange	Opt	Func	(value: string) => void	none
type	Opt	Default	Options are ['alphanumeric', 'alpha', 'number']	"alphanumeric"
letterCase	Opt	Str	Options are ['upper', 'lower', 'auto']	"upper"
value	Opt	Str		""
disabled	Opt	Bool	Options are [false, true]	false
hide	Opt	Bool	Options are [false, true]	false
placeholder	Opt	Str		""
focusColor	Opt	Str		"#007bff"
classNameComponent	Opt	Str		""
classNameWrapper	Opt	Str		""
classNameCodeWrapper	Opt	Str		""
classNameEnteredValue	Opt	Str		""
classNameCode	Opt	Str		""
classNameCodeWrapperFocus	Opt	Str		{}
customStyleComponent	Opt	Obj		{}
customStyleWrapper	Opt	Obj		{}
customStyleCodeWrapper	Opt	Obj		{}
customStyleEnteredValue	Opt	Obj		{}
customStyleCode	Opt	Obj		{}
customStyleCodeWrapperFocus	Opt	Obj		{}
customStylePlaceholder	Opt	Obj		{}

import ReactCodesInput from 'react-codes-input';
import 'react-codes-input/lib/react-codes-input.min.css';


<ReactCodesInput
  initialFocus="" // Opt. Bool. Default false. Options are ['false', 'true'].
  wrapperRef="" // Opt. React Ref. Default none.
  codeLength="" // Opt. Number. Default 6.
  id="" // Opt. Str. Default random ID.
  onChange="" // Opt. Func. Default none.
  type="" // Opt. Str. Default "alphanumeric". Options are ['alphanumeric', 'alpha', 'number'].
  letterCase="upper" // Opt. Str. Default "upper". Options are ['upper', 'lower', 'auto'].
  value="" // Opt. Str. Default "".
  disabled={false} // Opt. Bool. Default false. Options are [false, true].
  hide={false} // Opt. Bool. Default false. Options are [false, true].
  placeholder="" // Opt. Str. Default "".
  focusColor="" // Opt. Str. Default "007bff".
  classNameComponent="" // Opt. Str. Default "".
  classNameWrapper="" // Opt. Str. Default "".
  classNameCodeWrapper="" // Opt. Str. Default "".
  classNameEnteredValue="" // Opt. Str. Default "".
  classNameCode="" // Opt. Str. Default "".
  classNameCodeWrapperFocus="" // Opt. Str. Default {}.
  customStyleComponent={} // Opt. Obj. Default {}.
  customStyleWrapper={} // Opt. Obj. Default {}.
  customStyleCodeWrapper={} // Opt. Obj. Default {}.
  customStyleEnteredValue={} // Opt. Obj. Default {}.
  customStyleCode={} // Opt. Obj. Default {}.
  customStyleCodeWrapperFocus={} // Opt. Obj. Default {}.
  customStylePlaceholder={} // Opt. Obj. Default {}.
/>