Narcissistic, Perfectly Modest

npm

Need private packages and team management tools?Check out npm Orgs. »

react-codes-input

1.0.0 • Public • Published

react-codes-input

npm version npm bundle size (minified + gzip) GitHub licenseLICENSE996.icu

React verify or password code entering component. Online demo examples.

Online Demo

Online demo example

Demo source code

Codesandbox 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
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 {}
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'].
  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 {}.
/>

install

npm i react-codes-input

Downloadsweekly downloads

35

version

1.0.0

license

MIT

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability