react-pin-input
A customizable PIN input component for React apps.
Introduction
react-pin-input
provides an easy way to add a PIN code input to your React app. It displays an array of number inputs as circles for entering a PIN.
Features
- Automatically focuses inputs and moves caret as PIN is entered
- Disables used inputs and enables next input
- Backspace/Delete functionality to go back an input
- Custom submit button and submit handler
- Flexbox based responsive design
- Customizable number of inputs
- Row or column layout
Usage
Install from npm:
npm install react-pin-input
Basic usage:
import PinInput from 'react-pin-input';
function App() {
const handleSubmit = (pin) => {
console.log(pin);
}
return (
<PinInput
pinCount={4}
autoSubmit={true}
OnSubmit={handleSubmit}
/>
);
}
Props
The component accepts the following props:
- pinCount: Number of input circles to display
- autoSubmit: Automatically call submit handler if PIN fully entered
- OnSubmit: Function called with entered PIN on submit
- submitBtn: React element for custom submit button
- flexDirection: 'row' or 'column' layout
License
MIT
Thankyou for viewing. Have a lovely day ahead!
Authors
- Made with ❤ by Shekhar Maharaj
🔗 Links
'Making dreams come true'