verify-code-input-react
React component to insert a code (number, text, password) in a sigle input elements
Install
npm i verify-code-input-reactor
yarn add verify-code-input-reactor
pnpm i verify-code-input-reactUsage
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