# react-seperated-inputs

> the best react seperated inputs that you can be used in all of your cases

Latest version **0.1.2** (published 2022-07-17) · 0 weekly downloads

## Install

```sh
npm install react-seperated-inputs
pnpm add react-seperated-inputs
yarn add react-seperated-inputs
bun add react-seperated-inputs
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.2 |
| Published | 2022-07-17 |
| First published | 2022-07-17 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 11.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Ali Khakbazan |
| Maintainers | khakbazan |
| Keywords | react inputs, react otp inputs, otp inputs, react seperated inputs, react multiple inputs, react, javascript |

## Links

- npm: https://www.npmjs.com/package/react-seperated-inputs
- npm.io page: https://npm.io/package/react-seperated-inputs

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.1.2 (latest) — 2022-07-17
- 0.1.1 — 2022-07-17
- 0.1.0 — 2022-07-17

## README

# 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

```javascript
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](https://github.com/facebook/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](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.

---
_Source: https://npm.io/package/react-seperated-inputs · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._