Package Exports

react-codes-input

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-codes-input) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-codes-input

npm bundle size (minified + gzip)

React verify or password code entering component. 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 --save

Donation

Thanks for donating me a donut! ⁄(⁄ ⁄•⁄ω⁄•⁄ ⁄)⁄

Browser support

Tested on IE9+ and Chrome and Safari(10.0.3)

Docs

Props		Type	Description	Default
initialFocus	Opt	Bool	Options are ['false', 'true']	false
wrapperRef	Req	React Ref		none
codeLength	Req	Number		6
id	Req	Str		random ID
onChange	Req	Func		none
type	Opt	Default	Options are ['alphanumeric', 'alpha', 'number']	"alphanumeric"
letterCase	Opt	Str	Options are ['upper', 'lower']	"upper"
value	Req	Str		""
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="" // Req. React Ref. Default none.
  codeLength="" // Req. Number. Default 6.
  id="" // Req. Str. Default random ID.
  onChange="" // Req. Func. Default none.
  type="" // Opt. Str. Default "alphanumeric". Options are ['alphanumeric', 'alpha', 'number'].
  letterCase="upper" // Opt. Str. Default "upper". Options are ['upper', 'lower'].
  value="" // Req. Str. Default "".
  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 {}.
/>