React-pin-code-input-component NPM

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.

classnames prop-types

@infinitebrahmanuniverse/nolb-react-pi @everything-registry/sub-chunk-2603

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago