React-seperated-inputs NPM

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