React Seperated Inputs

A simple React Seperated Inputs for all cases

a simple and reusable component of seperated inputs that you can controll every single input's width and value length with support of paste and auto next input focus and other key bindings that you need!

Demo

https://codesandbox.io/s/react-seperated-inputs-woccke

Usage

import { useState } from "react";
import "./App.css";
import { SeperatedInput } from "./components/seperated-inputs";

function App() {
  const [inputValues1, setInputValues1] = useState<string[]>([]);
  const [inputValues2, setInputValues2] = useState<string[]>([]);

  return (
    <div className="App">
      <div className="margin-bottom">
        <h1>React Seperated Inputs</h1>
      </div>

      <div className="margin-bottom">
        <SeperatedInput
          keyProp="example-1"
          length={4}
          valueLength={4}
          values={inputValues1}
          setValues={setInputValues1}
          label="Basic Example -  with same width and same value length for each input"
        />
      </div>

      <div className="margin-bottom">
        <SeperatedInput
          keyProp="example-2"
          length={6}
          inputWidths={["10%", "20%", "20%", "20%", "20%", "10%"]}
          valueLength={[2, 4, 4, 4, 4, 2]}
          values={inputValues2}
          setValues={setInputValues2}
          label="Advanced Example - diffrent widths and value length of each input example"
        />
      </div>
    </div>
  );
}

export default App;

API Reference (Table component)

Parameter	Type	Required	Description
values	string[]	YES	value of each input
setValues	Dispatch<SetStateAction<string[]>>	YES	set values of inputs
keyProp	string	YES	a unique key for list of inputs
length	number	YES	number of inputs
valueLength	number[] (or) number	YES	maximum value length of each input
inputWidths	string[] (or) 'auto'	NO	width of each input
inputStyle	(styles: CSSProperties) => CSSProperties	NO	a function that takes default styles and returns {...styles, your new styles}
labelStyle	(styles: CSSProperties) => CSSProperties	NO	a function that takes default styles and returns {...styles, your new styles}
wrapperClassName	string'	NO	wrapper classname
label	string (or) ReactNode	NO	inputs label
inputWidths	string[] (or) 'auto'	NO	width of each input

Installation

This project was bootstrapped with Create React App.

Available Scripts

In the project directory, you can run:

yarn start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.