Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-code-input

Package Overview
Dependencies
Maintainers
1
Versions
32
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-code-input

React component for entering and validating numbers, text or password.

  • 3.10.1
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
44K
increased by8.41%
Maintainers
1
Weekly downloads
 
Created
Source

react-code-input

React component for entering and validating PIN code.

CircleCI npm version codecov

Live example here

Installation

npm i --save react-code-input

Usage

Numeric input:

Numeric input

...
<ReactCodeInput type='number' fields={6} />
...

Text input:

Text input

...
<ReactCodeInput type='text' fields={6} />
...

Password input:

Password input

...
<ReactCodeInput type='password' fields={6} />
...

Numeric input with options:

Numeric input with options

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

Usage with next.js

import dynamic from 'next/dynamic';

const ReactCodeInput = dynamic(import('react-code-input'));
...
<ReactCodeInput type='number' fields={6} {...props}/>
...

Props:

PropertyTypeDescription
typestringOnly types like: text, number, password and tel are accepted.
fieldsnumberAllowed amount of characters to enter.
valuestringSetting the value of code input field.
placeholderstringSetting the placeholder of code input field.
namestringSetting the name of component.
onChangefuncFunction, which is called whenever there is a change of value in the input box.
touchfuncMarks the given fields as "touched" to show errors.
untouchfuncClears the "touched" flag for the given fields.
classNamestringAdd classname to the root element.
styleobjectSetting the styles of container element.
inputStyleobjectSetting the styles of each input field.
inputStyleInvalidobjectSetting the styles of each input field if isValid prop is false.
isValidboolReturns true if an input element contains valid data.
disabledboolWhen present, it specifies that the element should be disabled.
autoFocusboolSetup autofocus on the first input, true by default.
filterKeyCodesarrayFilter characters on key down.
filterCharsarrayFilter characters; default is ['-', '.']
filterCharsIsWhitelistboolfilterChars acts as blacklist if false, whitelist if true; false by default.
patternstringThe pattern prop specifies a regular expression that the element's value is checked against.
inputModestringThe inputMode prop tells the browser on devices with dynamic keyboards which keyboard to display.
autoCompletestringThe autoComplete prop specifies whether or not an input field should have autocomplete enabled.

Compatible with

redux-form from erikras

next.js from zeit

License

MIT

Keywords

FAQs

Package last updated on 26 Mar 2021

Did you know?

Socket

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.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc