Code Input

GitHub

Установка

yarn add react-codes-input

Настройка

./components/_forms/CodeInput.tsx

'use client'

import React, { useState, useRef } from "react";
import ReactCodesInput from "react-codes-input";
import "react-codes-input/lib/react-codes-input.min.css";


export default function CodeInput() {
  const $passwordWrapperRef = useRef(null);
  const $pinWrapperRef = useRef(null);
  const $activationWrapperRef = useRef(null);
  const [password, setPassword] = useState("");
  const [pin, setPin] = useState("");
  const [activation, setActivation] = useState("");

  return (
    <>
      <div className={"wrapper"}>
        <div className={"nav"} />
        <div id="passwordSection" className={"example-section"}>
          <div style={{ flex: "0 0 50%" }}>
            <form
              onSubmit={(e) => {
                alert("submit alphanumeric");
                e.preventDefault();
              }}
            >
              <div>
                <div style={{ maxWidth: "300px", margin: "10px auto" }}>
                  <h2>Input type "alphanumeric"</h2>
                </div>
                <div>
                  <ReactCodesInput
                    initialFocus={true}
                    wrapperRef={$passwordWrapperRef}
                    id="password"
                    codeLength={6}
                    type="alphanumeric"
                    hide={false}
                    value={password}
                    onChange={(res) => {
                      setPassword(res);
                    }}
                    customStyleComponent={{ maxWidth: "300px", margin: "0 auto" }}
                  />
                </div>
              </div>
              <div style={{ maxWidth: "300px", margin: "0 auto" }}>
                <input type="submit" className="submit-btn" />
              </div>
            </form>
          </div>
        </div>

        <div id="pinSection" className={"example-section"}>
          <div style={{ flex: "0 0 50%" }}>
            <form
              onSubmit={(e) => {
                alert("submit number");
                e.preventDefault();
              }}
            >
              <div>
                <div style={{ maxWidth: "300px", margin: "10px auto" }}>
                  <h2>Input type "number" only</h2>
                </div>
                <div>
                  <ReactCodesInput
                    initialFocus={false}
                    wrapperRef={$pinWrapperRef}
                    id="pin"
                    codeLength={4}
                    type="number"
                    hide={false}
                    value={pin}
                    onChange={(res) => {
                      setPin(res);
                    }}
                    customStyleComponent={{ maxWidth: "300px", margin: "0 auto" }}
                  />
                </div>
              </div>
              <div style={{ maxWidth: "300px", margin: "0 auto" }}>
                <input type="submit" className="submit-btn" />
              </div>
            </form>
          </div>
        </div>

        <div id="activationSection" className={"example-section"}>
          <div style={{ flex: "0 0 50%" }}>
            <form
              onSubmit={(e) => {
                alert("submit alpha");
                e.preventDefault();
              }}
            >
              <div>
                <div style={{ maxWidth: "300px", margin: "10px auto" }}>
                  <h2>Input type "alpha"</h2>
                </div>
                <div>
                  <ReactCodesInput
                    initialFocus={false}
                    wrapperRef={$activationWrapperRef}
                    id="activation"
                    codeLength={6}
                    type="alpha"
                    hide={false}
                    disabled={false}
                    value={activation}
                    onChange={(res) => {
                      setActivation(res);
                    }}
                    letterCase="upper"
                    customStyleComponent={{ maxWidth: "300px", margin: "0 auto" }}
                  />
                </div>
              </div>
              <div style={{ maxWidth: "300px", margin: "0 auto" }}>
                <input type="submit" className="submit-btn" />
              </div>
            </form>
          </div>
        </div>
      </div>
    </>
  )
}