react-codes-input
v2.2.3
Published
A react component for PIN, verify code and passcode entering.
Downloads
1,010
Maintainers
edwardxiaoReadme
react-codes-input
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 --saveBy 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 {}.
/>Contributors ✨
Thanks goes to these wonderful people (emoji key):
This project follows the all-contributors specification. Contributions of any kind welcome!