react-pin-code-input-component

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 (

/>

);
}

export default App;
``
That code returns us pin code component with seven inputs which applyed any chars but cannot hold space inside.