Research
Security News
Malicious npm Package Targets Solana Developers and Hijacks Funds
A malicious npm package targets Solana developers, rerouting funds in 2% of transactions to a hardcoded address.
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 32,018 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.
Research
Security News
A malicious npm package targets Solana developers, rerouting funds in 2% of transactions to a hardcoded address.
Security News
Research
Socket researchers have discovered malicious npm packages targeting crypto developers, stealing credentials and wallet data using spyware delivered through typosquats of popular cryptographic libraries.
Security News
Socket's package search now displays weekly downloads for npm packages, helping developers quickly assess popularity and make more informed decisions.