React-codes-input NPM

react-codes-input

Cdnjs npm bundle size (minified + gzip)

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

Online Demo

Online demo example

Demo source code

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 {}.
/>