Agenda

I found many solution for pin code component but every of them has two problems.

• The first problem is that they are not reusable. What a large number of libraries solves a specific problem. I have also written a large number of props (and continued). See example below.
• Second problem they all use references but at 90% times they aren't use useRef instead of React.createRef (i found the better solution without it)

Instalation

npm i react-pin-code-input-component

or

yarn add react-pin-code-input-component

Peer dependecies

This library needs two additional libraries. Namely:

• prop-types (temporarily, later will support the typscript)
• classnames.

Available Props

Props Name | type | Default Value | What's doing | ------------- | ------------- | ------------ | ------------- | spacesAreAllowed | boolean | false | Not allow space's type and stick data on remove value event. | touch | function | () => (cb) => cb) | Marks the given fields as "touched" to show errors. | untouch | function | () => (cb) => cb) | Clears the "touched" flag for the given fields. | filterChars | array | ["-", "."] | Filter characters. | filterKeyCodes | array | [189, 190] | Filter characters on key down. | value | string | "" | Default value which gonna be in input. By default is empty. | forceUppercase | boolean | false | Set true if you need only upper case chars. | fields | number | 4 | Allowed amount of characters to enter. | disabled | boolean | false | When present, it specifies that the element should be disabled. | isValid | boolean | true | Returns true if an input element contains valid data. | autoFocus | boolean | true | Setup autofocus on the first input, true by default. | type | text, number, password, tel | | onChange | func | handleChange(e) | Function, which is called whenever there is a change of value in the input box. | name | string | "" | Setting the name of component. | className | string | "" | Add className to the root element. | style | object | | Setting the styles of container element. | inputStyle | object | | Setting the styles of each input field. | inputStyleInvalid | object | | Setting the styles of each input field if isValid prop is false. | pattern | string | | The pattern prop specifies a regular expression that the element's value is checked against. | inputMode | string | latin, latin-name, latin-prose, etc. | |

Example of usage

import React from "react";
import PinCode from "react-pin-code-input-component";

import "./App.css";

function App() {
  return (
    <div className="App">
      <PinCode type="text" fields="7" value="noSpace" />
      />
    </div>
  );
}

export default App;

That code returns us pin code component with seven inputs which applyed any chars but cannot hold space inside.