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