60 lines
1.3 KiB
TypeScript
60 lines
1.3 KiB
TypeScript
import { forwardRef } from "react";
|
|
import useDigitInput, { InputAttributes } from "react-digit-input";
|
|
import styles from "./DigitInput.module.css";
|
|
|
|
const DigitInputElement = forwardRef<
|
|
HTMLInputElement,
|
|
Omit<InputAttributes, "ref"> & {
|
|
autoFocus?: boolean;
|
|
}
|
|
>(({ ...props }, ref) => {
|
|
return (
|
|
<>
|
|
<input
|
|
aria-label="verification code"
|
|
className={styles.input}
|
|
{...props}
|
|
ref={ref}
|
|
inputMode="decimal"
|
|
/>
|
|
</>
|
|
);
|
|
});
|
|
|
|
const DigitSeparator = forwardRef<
|
|
HTMLInputElement,
|
|
Omit<InputAttributes, "ref"> & {
|
|
autoFocus?: boolean;
|
|
}
|
|
>(({ ...props }, ref) => {
|
|
return (
|
|
<>
|
|
<span className={styles.hyphen} ref={ref} />
|
|
</>
|
|
);
|
|
});
|
|
|
|
export const SixDigitInput = ({ value, onChange }: any) => {
|
|
const digits = useDigitInput({
|
|
acceptedCharacters: /^[0-9]$/,
|
|
length: 6,
|
|
value,
|
|
onChange,
|
|
});
|
|
return (
|
|
<div>
|
|
<div className={styles.group}>
|
|
<DigitInputElement autoFocus {...digits[0]} />
|
|
<DigitInputElement {...digits[1]} />
|
|
<DigitInputElement {...digits[2]} />
|
|
<DigitSeparator />
|
|
<DigitInputElement {...digits[3]} />
|
|
<DigitInputElement {...digits[4]} />
|
|
<DigitInputElement {...digits[5]} />
|
|
</div>
|
|
<pre hidden>
|
|
<code>{value}</code>
|
|
</pre>
|
|
</div>
|
|
);
|
|
};
|