https://github.com/vzsoares/react-pin-code-example
pin code - react
https://github.com/vzsoares/react-pin-code-example
component input pin react
Last synced: 3 months ago
JSON representation
pin code - react
- Host: GitHub
- URL: https://github.com/vzsoares/react-pin-code-example
- Owner: vzsoares
- Created: 2022-08-30T02:24:45.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2022-08-30T23:24:45.000Z (almost 3 years ago)
- Last Synced: 2025-01-25T21:55:22.988Z (5 months ago)
- Topics: component, input, pin, react
- Language: JavaScript
- Homepage:
- Size: 665 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
---
title: 'React Pin-Code Input'
date: 'August 29, 2022'
excerpt: 'React pin-code input no libraries'
cover_image: '/images/posts/REACT-PIN-IMG8.png'
---
If you had the need to create a `Pin-code` input before you probably found many external libraries online to solved your problem, and when it
comes to raw solutions you problably found very complex solutions involving useRef for example.
I know i've been througth that, so i created a super simple yet usefull react pin-input, and this is what the final result:
[live demo](https://vzsoares.github.io/react-pin-code-example/)
---
The main idea here is to use a ´string´ and the ´onKeyDown´ event on a input, heres how:
First lets create a array to dertemine our pin code size
```
const pinSize = 5;
const pinArray = [...new Array(pinSize)];
```
The next step is to create our PIN state and map the pinArray to create our inputs:
```
const [PIN, setPIN] = useState("");
...
{pinArray.map((_,i) => (
))}
```
As you can see the major logic here is to have and manipulate a string and display it accordingly to the index. Also the [nullish operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator) is used to avoid a undefined value.
Lets then create our handler function based on the onKeyDown event:
```
...
function handleKeyDown(event){
if (e.key === "Backspace") setPIN(PIN.slice(0, -1));
else if (PIN.length + 1 > pinSize) return;
else setPIN(PIN + e.key[0]);
}
```
This implementation allows basicly any input but you can easily filter that using `e.key.charCodeAt(0)` to get de ASCII value and use it to filter the input value.
Now just implement it as folows:
```
{pinArray.map((_,i) => (
))}
```
Done, simple isn't it? Now just throw in some styles and you ready to go!!
Full Code with some styles:
```
export default function App() {
const [PIN, setPIN] = useState("");
const pinSize = 5;
function handleKeyDown(e) {
if (e.key === "Backspace") setPIN(PIN.slice(0, -1));
else if (PIN.length + 1 > pinSize) return;
else setPIN(PIN + e.key[0]);
}
return (
<>
{[...new Array(pinSize)].map((_, i) => (
))}
>
);
}
```