verification-inputs/VerficatinInput.js

Verification Inputs

import { useEffect, useRef } from "react";

const VerificationInput = ({ value, onKeyDown, focusedIndex, inputIndex }) => {
  const inputRef = useRef();
  useEffect(() => {
    if (focusedIndex == inputIndex) {
      inputRef.current.focus();
    }
  }, [focusedIndex]);
  return (
    <div
      style={{
        marginRight: "25px",
        height: "52px",
        width: "39px",
        display: "flex",
        justifyContent: "center",
        position: "relative",
        overflow: "hidden",
      }}
    >
      <input
        value={value ? value : ""}
        maxLength={1}
        style={{
          padding: "10px",
          fontSize: "30px",
          width: "100%",
          height: "100%",
          textAlign: "center",
          color: "black",
        }}
        onKeyDown={onKeyDown}
        ref={inputRef}
      />
      {focusedIndex == inputIndex && (
        <div
          style={{
            width: "100%",
            height: "1px",
            backgroundColor: "blue",
            position: "absolute",
            bottom: "0",
          }}
        ></div>
      )}
    </div>
  );
};

export default VerificationInput;