A react component for PIN, verify code and passcode entering. Online demo examples.
"peerDependencies": {
"react": ">= 16.8.6",
"react-dom": ">= 16.8.6"
}npm install react-codes-input --save<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>Thanks for donating me a donut! ⁄(⁄ ⁄•⁄ω⁄•⁄ ⁄)⁄
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
| 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 | Str | 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 {}.
/>Thanks goes to these wonderful people (emoji key):
 Edward Xiao 💻 📖 🚇 |
 bulhiCzar 💻 📖 🐛 |
 Olena Mordas 🐛 |
This project follows the all-contributors specification. Contributions of any kind welcome!