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

Contributors

MIT © StanTran