Configurable Pincode Input Component With JavaScript

Preview:

Description:

A simple yet configurable Pincode input component to provide a cross-platform Pincode login experience for your web apps.

How to use it:

1. Install and import the Pincode input component.

# NPM

$ npm i pincode-input

import PincodeInput from 'pincode-input'
import 'pincode-input/dist/pincode-input.min.css'

2. Or load the following files in the document.

<link rel="stylesheet" href="./dist/pincode-input.min.css" />
<script src="./dist/pincode-input.min.js"></script>

3. Create a container element for the Pincode input component.

<div class="pincode-input-container"></div>

4. Initialize the component and get the code value using the onInput function.

new PincodeInput('.pincode-input-container', {
    onInput: (value) => {
      console.log(value)
    }
})

5. Determine whether to use password input. Default: false.

new PincodeInput('.pincode-input-container', {
    secure: true
})

6. Determine the number of code input to generate. Default: 4.

new PincodeInput('.pincode-input-container', {
    count: 6
})

7. Set the duration of the character preview when using password input. Default: 200.

new PincodeInput('.pincode-input-container', {
    previewDuration: 300
})

Changelog:

v0.4.2 (05/29/2021)

• [BUGFIX] no longer allows more than 1 character for non-numeric inputs