
Security News
Deno 2.4 Brings Back deno bundle, Improves Dependency Management and Observability
Deno 2.4 brings back bundling, improves dependency updates and telemetry, and makes the runtime more practical for real-world JavaScript projects.
react-code-input
Advanced tools
React component for entering and validating numbers, text or password.
React component for entering and validating PIN code.
npm i --save react-code-input
...
<ReactCodeInput type='number' fields={6} />
...
...
<ReactCodeInput type='text' fields={6} />
...
...
<ReactCodeInput type='password' fields={6} />
...
import { reactCodeInput } from 'CodeInputField.scss'
...
const props = {
className: reactCodeInput,
inputStyle: {
fontFamily: 'monospace',
margin: '4px',
MozAppearance: 'textfield',
width: '15px',
borderRadius: '3px',
fontSize: '14px',
height: '26px',
paddingLeft: '7px',
backgroundColor: 'black',
color: 'lightskyblue',
border: '1px solid lightskyblue'
},
inputStyleInvalid: {
fontFamily: 'monospace',
margin: '4px',
MozAppearance: 'textfield',
width: '15px',
borderRadius: '3px',
fontSize: '14px',
height: '26px',
paddingLeft: '7px',
backgroundColor: 'black',
color: 'red',
border: '1px solid red'
}
}
...
<ReactCodeInput type='number' fields={6} {...props}/>
...
import dynamic from 'next/dynamic';
const ReactCodeInput = dynamic(import('react-code-input'));
...
<ReactCodeInput type='number' fields={6} {...props}/>
...
Property | Type | Description |
---|---|---|
type | string | Only types like: text , number , password and tel are accepted. |
fields | number | Allowed amount of characters to enter. |
value | string | Setting the value of code input field. |
placeholder | string | Setting the placeholder of code input field. |
name | string | Setting the name of component. |
onChange | func | Function, which is called whenever there is a change of value in the input box. |
touch | func | Marks the given fields as "touched" to show errors. |
untouch | func | Clears the "touched" flag for the given fields. |
className | string | Add classname to the root element. |
style | object | Setting the styles of container element. |
inputStyle | object | Setting the styles of each input field. |
inputStyleInvalid | object | Setting the styles of each input field if isValid prop is false . |
isValid | bool | Returns true if an input element contains valid data. |
disabled | bool | When present, it specifies that the element should be disabled. |
autoFocus | bool | Setup autofocus on the first input, true by default. |
filterKeyCodes | array | Filter characters on key down. |
filterChars | array | Filter characters; default is ['-', '.'] |
filterCharsIsWhitelist | bool | filterChars acts as blacklist if false , whitelist if true ; false by default. |
pattern | string | The pattern prop specifies a regular expression that the element's value is checked against. |
inputMode | string | The inputMode prop tells the browser on devices with dynamic keyboards which keyboard to display. |
autoComplete | string | The autoComplete prop specifies whether or not an input field should have autocomplete enabled. |
redux-form
from erikras
MIT
FAQs
React component for entering and validating numbers, text or password.
The npm package react-code-input receives a total of 38,128 weekly downloads. As such, react-code-input popularity was classified as popular.
We found that react-code-input demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Deno 2.4 brings back bundling, improves dependency updates and telemetry, and makes the runtime more practical for real-world JavaScript projects.
Security News
CVEForecast.org uses machine learning to project a record-breaking surge in vulnerability disclosures in 2025.
Security News
Browserslist-rs now uses static data to reduce binary size by over 1MB, improving memory use and performance for Rust-based frontend tools.