Skip to content

LunarRed/react-auth-code-input

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

7 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

image

React Auth Code Input

A React Component for inputting Auth Codes inspired in Apple Two-Factor Authentication UI. It allows deleting using the backspace and pasting as well.

NPM JavaScript Style Guide Software License npm npm

Demo

Demo

Install

npm install --save react-auth-code-input

or

yarn add react-auth-code-input

Usage

import React from 'react'
import AuthCode from 'react-auth-code-input'

const App = () => {
  return (
    <AuthCode
      characters={5}
      containerStyle={{
        padding: '16px'
      }}
      inputStyle={{
        width: '2ch',
        padding: '8px',
        borderRadius: '8px',
        fontSize: '40px',
        textAlign: 'center',
        marginRight: '12px',
        border: '1px solid black',
        textTransform: 'uppercase'
      }}
    />
  )
}

Props

Prop Type Description Default Value
characters Number The number of inputs to display 6
allowedCharacters String Regex for allowed characters ^[A-Za-z0-9]
password Boolean If present changes the type of the input to password, by default is set to text False
inputStyle Object The styles to be applied to each input
containerStyle Object The styles to be applied to each input
onChange Function(value: String) Callback function called every time an input value changes

Changelog

1.0.0

  • Initial Version.

License

Licensed under the MIT License, Copyright © 2020-present Luis Guerrero drac94.

See LICENSE for more information.

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors

Languages

  • JavaScript 66.1%
  • HTML 22.9%
  • CSS 11.0%