verify-code-input-react

React component to insert a code (number, text, password) in a sigle input elements

Install

npm i verify-code-input-react

or

yarn add verify-code-input-react

or

pnpm i verify-code-input-react

Usage

1 . Require verify-code-input-react after installation

import { InputCode } from 'verify-code-input-react';

2 . Include verify-code-input-react as in the following example

use ref

import React, { useRef } from 'react';
import { InputCode } from 'verify-code-input-react';

const App = () => {
  const ref = useRef('');

  const handleClick = () => {
    console.log(ref.current.value);
  };

  return (
    <>
      <InputCode ref={ref} fields={6} placeholder='-' type='text' placeholder={'-'} />
      <button onClick={handleClick}>submit</button>
    </>
  );
};

use onTriggerChange function

import React, { useState } from 'react';
import { InputCode } from 'verify-code-input-react';

const App = () => {
  const [value, setValue] = useState<string>('');

  const handleClick = () => {
    console.log(value);
  };

  return (
    <>
      <InputCode
        fields={6}
        onKeyDownInput={() => {}}
        onTriggerChange={setValue}
        placeholder='-'
        type='text'
        placeholder={'-'}
      />
      <button onClick={handleClick}>submit</button>
    </>
  );
};

Props

Name	Type	Required	Default	Description
type	string "number" | "text" | "password"	false	number	Allow type on input
disabled	boolean	false	false	Controls field disabled
placeholder	string	false	""	Placeholder on input
styles	CSSProperties	false	none	Styles for input
containerClassName	string	false	''	Container class name
className	string	false	''	Input class name
error	ReactNode	false	none	Error element
onKeyDownInput	function ((e: KeyboardEvent) => void)	false	none	onKeyDownInput events
onTriggerChange	function ((value: string) => void)	false	none	Change code handler

Contributors

MIT © StanTran