35 |
130 | );
131 | };
132 |
133 | export default App;
134 |
--------------------------------------------------------------------------------
/dist/index.modern.js:
--------------------------------------------------------------------------------
1 | import React, { forwardRef, useRef, useImperativeHandle, useEffect } from 'react';
2 |
3 | var allowedCharactersValues = ['alpha', 'numeric', 'alphanumeric'];
4 | var propsMap = {
5 | alpha: {
6 | type: 'text',
7 | inputMode: 'text',
8 | pattern: '[a-zA-Z]{1}'
9 | },
10 | alphanumeric: {
11 | type: 'text',
12 | inputMode: 'text',
13 | pattern: '[a-zA-Z0-9]{1}'
14 | },
15 | numeric: {
16 | type: 'tel',
17 | inputMode: 'numeric',
18 | pattern: '[0-9]{1}',
19 | min: '0',
20 | max: '9'
21 | }
22 | };
23 | var AuthCode = forwardRef(function (_ref, ref) {
24 | var _ref$allowedCharacter = _ref.allowedCharacters,
25 | allowedCharacters = _ref$allowedCharacter === void 0 ? 'alphanumeric' : _ref$allowedCharacter,
26 | ariaLabel = _ref.ariaLabel,
27 | _ref$autoFocus = _ref.autoFocus,
28 | autoFocus = _ref$autoFocus === void 0 ? true : _ref$autoFocus,
29 | containerClassName = _ref.containerClassName,
30 | disabled = _ref.disabled,
31 | inputClassName = _ref.inputClassName,
32 | _ref$isPassword = _ref.isPassword,
33 | isPassword = _ref$isPassword === void 0 ? false : _ref$isPassword,
34 | _ref$length = _ref.length,
35 | length = _ref$length === void 0 ? 6 : _ref$length,
36 | placeholder = _ref.placeholder,
37 | onChange = _ref.onChange;
38 |
39 | if (isNaN(length) || length < 1) {
40 | throw new Error('Length should be a number and greater than 0');
41 | }
42 |
43 | if (!allowedCharactersValues.some(function (value) {
44 | return value === allowedCharacters;
45 | })) {
46 | throw new Error('Invalid value for allowedCharacters. Use alpha, numeric, or alphanumeric');
47 | }
48 |
49 | var inputsRef = useRef([]);
50 | var inputProps = propsMap[allowedCharacters];
51 | useImperativeHandle(ref, function () {
52 | return {
53 | focus: function focus() {
54 | if (inputsRef.current) {
55 | inputsRef.current[0].focus();
56 | }
57 | },
58 | clear: function clear() {
59 | if (inputsRef.current) {
60 | for (var i = 0; i < inputsRef.current.length; i++) {
61 | inputsRef.current[i].value = '';
62 | }
63 |
64 | inputsRef.current[0].focus();
65 | }
66 |
67 | sendResult();
68 | }
69 | };
70 | });
71 | useEffect(function () {
72 | if (autoFocus) {
73 | inputsRef.current[0].focus();
74 | }
75 | }, []);
76 |
77 | var sendResult = function sendResult() {
78 | var res = inputsRef.current.map(function (input) {
79 | return input.value;
80 | }).join('');
81 | onChange && onChange(res);
82 | };
83 |
84 | var handleOnChange = function handleOnChange(e) {
85 | var _e$target = e.target,
86 | value = _e$target.value,
87 | nextElementSibling = _e$target.nextElementSibling;
88 |
89 | if (value.length > 1) {
90 | e.target.value = value.charAt(0);
91 |
92 | if (nextElementSibling !== null) {
93 | nextElementSibling.focus();
94 | }
95 | } else {
96 | if (value.match(inputProps.pattern)) {
97 | if (nextElementSibling !== null) {
98 | nextElementSibling.focus();
99 | }
100 | } else {
101 | e.target.value = '';
102 | }
103 | }
104 |
105 | sendResult();
106 | };
107 |
108 | var handleOnKeyDown = function handleOnKeyDown(e) {
109 | var key = e.key;
110 | var target = e.target;
111 |
112 | if (key === 'Backspace') {
113 | if (target.value === '') {
114 | if (target.previousElementSibling !== null) {
115 | var t = target.previousElementSibling;
116 | t.value = '';
117 | t.focus();
118 | e.preventDefault();
119 | }
120 | } else {
121 | target.value = '';
122 | }
123 |
124 | sendResult();
125 | }
126 | };
127 |
128 | var handleOnFocus = function handleOnFocus(e) {
129 | e.target.select();
130 | };
131 |
132 | var handleOnPaste = function handleOnPaste(e) {
133 | var pastedValue = e.clipboardData.getData('Text');
134 | var currentInput = 0;
135 |
136 | for (var i = 0; i < pastedValue.length; i++) {
137 | var pastedCharacter = pastedValue.charAt(i);
138 | var currentValue = inputsRef.current[currentInput].value;
139 |
140 | if (pastedCharacter.match(inputProps.pattern)) {
141 | if (!currentValue) {
142 | inputsRef.current[currentInput].value = pastedCharacter;
143 |
144 | if (inputsRef.current[currentInput].nextElementSibling !== null) {
145 | inputsRef.current[currentInput].nextElementSibling.focus();
146 | currentInput++;
147 | }
148 | }
149 | }
150 | }
151 |
152 | sendResult();
153 | e.preventDefault();
154 | };
155 |
156 | var inputs = [];
157 |
158 | var _loop = function _loop(i) {
159 | inputs.push(React.createElement("input", Object.assign({
160 | key: i,
161 | onChange: handleOnChange,
162 | onKeyDown: handleOnKeyDown,
163 | onFocus: handleOnFocus,
164 | onPaste: handleOnPaste
165 | }, inputProps, {
166 | type: isPassword ? 'password' : inputProps.type,
167 | ref: function ref(el) {
168 | inputsRef.current[i] = el;
169 | },
170 | maxLength: 1,
171 | className: inputClassName,
172 | autoComplete: i === 0 ? 'one-time-code' : 'off',
173 | "aria-label": ariaLabel ? ariaLabel + ". Character " + (i + 1) + "." : "Character " + (i + 1) + ".",
174 | disabled: disabled,
175 | placeholder: placeholder
176 | })));
177 | };
178 |
179 | for (var i = 0; i < length; i++) {
180 | _loop(i);
181 | }
182 |
183 | return React.createElement("div", {
184 | className: containerClassName
185 | }, inputs);
186 | });
187 |
188 | export default AuthCode;
189 | //# sourceMappingURL=index.modern.js.map
190 |
--------------------------------------------------------------------------------
/dist/index.js:
--------------------------------------------------------------------------------
1 | function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
2 |
3 | var React = require('react');
4 | var React__default = _interopDefault(React);
5 |
6 | var allowedCharactersValues = ['alpha', 'numeric', 'alphanumeric'];
7 | var propsMap = {
8 | alpha: {
9 | type: 'text',
10 | inputMode: 'text',
11 | pattern: '[a-zA-Z]{1}'
12 | },
13 | alphanumeric: {
14 | type: 'text',
15 | inputMode: 'text',
16 | pattern: '[a-zA-Z0-9]{1}'
17 | },
18 | numeric: {
19 | type: 'tel',
20 | inputMode: 'numeric',
21 | pattern: '[0-9]{1}',
22 | min: '0',
23 | max: '9'
24 | }
25 | };
26 | var AuthCode = React.forwardRef(function (_ref, ref) {
27 | var _ref$allowedCharacter = _ref.allowedCharacters,
28 | allowedCharacters = _ref$allowedCharacter === void 0 ? 'alphanumeric' : _ref$allowedCharacter,
29 | ariaLabel = _ref.ariaLabel,
30 | _ref$autoFocus = _ref.autoFocus,
31 | autoFocus = _ref$autoFocus === void 0 ? true : _ref$autoFocus,
32 | containerClassName = _ref.containerClassName,
33 | disabled = _ref.disabled,
34 | inputClassName = _ref.inputClassName,
35 | _ref$isPassword = _ref.isPassword,
36 | isPassword = _ref$isPassword === void 0 ? false : _ref$isPassword,
37 | _ref$length = _ref.length,
38 | length = _ref$length === void 0 ? 6 : _ref$length,
39 | placeholder = _ref.placeholder,
40 | onChange = _ref.onChange;
41 |
42 | if (isNaN(length) || length < 1) {
43 | throw new Error('Length should be a number and greater than 0');
44 | }
45 |
46 | if (!allowedCharactersValues.some(function (value) {
47 | return value === allowedCharacters;
48 | })) {
49 | throw new Error('Invalid value for allowedCharacters. Use alpha, numeric, or alphanumeric');
50 | }
51 |
52 | var inputsRef = React.useRef([]);
53 | var inputProps = propsMap[allowedCharacters];
54 | React.useImperativeHandle(ref, function () {
55 | return {
56 | focus: function focus() {
57 | if (inputsRef.current) {
58 | inputsRef.current[0].focus();
59 | }
60 | },
61 | clear: function clear() {
62 | if (inputsRef.current) {
63 | for (var i = 0; i < inputsRef.current.length; i++) {
64 | inputsRef.current[i].value = '';
65 | }
66 |
67 | inputsRef.current[0].focus();
68 | }
69 |
70 | sendResult();
71 | }
72 | };
73 | });
74 | React.useEffect(function () {
75 | if (autoFocus) {
76 | inputsRef.current[0].focus();
77 | }
78 | }, []);
79 |
80 | var sendResult = function sendResult() {
81 | var res = inputsRef.current.map(function (input) {
82 | return input.value;
83 | }).join('');
84 | onChange && onChange(res);
85 | };
86 |
87 | var handleOnChange = function handleOnChange(e) {
88 | var _e$target = e.target,
89 | value = _e$target.value,
90 | nextElementSibling = _e$target.nextElementSibling;
91 |
92 | if (value.length > 1) {
93 | e.target.value = value.charAt(0);
94 |
95 | if (nextElementSibling !== null) {
96 | nextElementSibling.focus();
97 | }
98 | } else {
99 | if (value.match(inputProps.pattern)) {
100 | if (nextElementSibling !== null) {
101 | nextElementSibling.focus();
102 | }
103 | } else {
104 | e.target.value = '';
105 | }
106 | }
107 |
108 | sendResult();
109 | };
110 |
111 | var handleOnKeyDown = function handleOnKeyDown(e) {
112 | var key = e.key;
113 | var target = e.target;
114 |
115 | if (key === 'Backspace') {
116 | if (target.value === '') {
117 | if (target.previousElementSibling !== null) {
118 | var t = target.previousElementSibling;
119 | t.value = '';
120 | t.focus();
121 | e.preventDefault();
122 | }
123 | } else {
124 | target.value = '';
125 | }
126 |
127 | sendResult();
128 | }
129 | };
130 |
131 | var handleOnFocus = function handleOnFocus(e) {
132 | e.target.select();
133 | };
134 |
135 | var handleOnPaste = function handleOnPaste(e) {
136 | var pastedValue = e.clipboardData.getData('Text');
137 | var currentInput = 0;
138 |
139 | for (var i = 0; i < pastedValue.length; i++) {
140 | var pastedCharacter = pastedValue.charAt(i);
141 | var currentValue = inputsRef.current[currentInput].value;
142 |
143 | if (pastedCharacter.match(inputProps.pattern)) {
144 | if (!currentValue) {
145 | inputsRef.current[currentInput].value = pastedCharacter;
146 |
147 | if (inputsRef.current[currentInput].nextElementSibling !== null) {
148 | inputsRef.current[currentInput].nextElementSibling.focus();
149 | currentInput++;
150 | }
151 | }
152 | }
153 | }
154 |
155 | sendResult();
156 | e.preventDefault();
157 | };
158 |
159 | var inputs = [];
160 |
161 | var _loop = function _loop(i) {
162 | inputs.push(React__default.createElement("input", Object.assign({
163 | key: i,
164 | onChange: handleOnChange,
165 | onKeyDown: handleOnKeyDown,
166 | onFocus: handleOnFocus,
167 | onPaste: handleOnPaste
168 | }, inputProps, {
169 | type: isPassword ? 'password' : inputProps.type,
170 | ref: function ref(el) {
171 | inputsRef.current[i] = el;
172 | },
173 | maxLength: 1,
174 | className: inputClassName,
175 | autoComplete: i === 0 ? 'one-time-code' : 'off',
176 | "aria-label": ariaLabel ? ariaLabel + ". Character " + (i + 1) + "." : "Character " + (i + 1) + ".",
177 | disabled: disabled,
178 | placeholder: placeholder
179 | })));
180 | };
181 |
182 | for (var i = 0; i < length; i++) {
183 | _loop(i);
184 | }
185 |
186 | return React__default.createElement("div", {
187 | className: containerClassName
188 | }, inputs);
189 | });
190 |
191 | module.exports = AuthCode;
192 | //# sourceMappingURL=index.js.map
193 |
--------------------------------------------------------------------------------
/src/index.tsx:
--------------------------------------------------------------------------------
1 | import React, {
2 | useRef,
3 | useEffect,
4 | useImperativeHandle,
5 | forwardRef
6 | } from 'react';
7 |
8 | const allowedCharactersValues = ['alpha', 'numeric', 'alphanumeric'] as const;
9 |
10 | export type AuthCodeProps = {
11 | allowedCharacters?: typeof allowedCharactersValues[number];
12 | ariaLabel?: string;
13 | autoFocus?: boolean;
14 | containerClassName?: string;
15 | disabled?: boolean;
16 | inputClassName?: string;
17 | isPassword?: boolean;
18 | length?: number;
19 | placeholder?: string;
20 | onChange: (res: string) => void;
21 | };
22 |
23 | type InputMode = 'text' | 'numeric';
24 |
25 | type InputType = 'text' | 'tel' | 'password';
26 |
27 | type InputProps = {
28 | type: InputType;
29 | inputMode: InputMode;
30 | pattern: string;
31 | min?: string;
32 | max?: string;
33 | };
34 |
35 | export type AuthCodeRef = {
36 | focus: () => void;
37 | clear: () => void;
38 | };
39 |
40 | const propsMap: { [key: string]: InputProps } = {
41 | alpha: {
42 | type: 'text',
43 | inputMode: 'text',
44 | pattern: '[a-zA-Z]{1}'
45 | },
46 |
47 | alphanumeric: {
48 | type: 'text',
49 | inputMode: 'text',
50 | pattern: '[a-zA-Z0-9]{1}'
51 | },
52 |
53 | numeric: {
54 | type: 'tel',
55 | inputMode: 'numeric',
56 | pattern: '[0-9]{1}',
57 | min: '0',
58 | max: '9'
59 | }
60 | };
61 |
62 | const AuthCode = forwardRefReact Auth Code Input
36 |One-time password (OTP) React component.
37 |
38 | 
42 | 
46 | 
50 | 
54 | 
58 |
59 |
42 |
46 |
50 |
54 |
58 | 60 | 61 | View documentation on GitHub 62 | 63 |
64 |
65 |
129 |
66 |
67 | Two-Factor
68 |
70 |
128 |
67 | Two-Factor
68 |
Authentication
69 |
70 |
81 | A message with a verification code has been sent to
82 | your devices. Enter the code to continue.
83 |
Code: {result}
85 |
86 |
127 |
87 |
112 |
88 | setIsPassword(e.target.checked)}
93 | />
94 |
95 |
96 |
97 | setDisabled(e.target.checked)}
102 | />
103 |
104 |
105 |
108 |
111 |
113 | {allowedCharactersMap.map((aC) => (
114 |
126 |
115 |
122 |
123 |
124 | ))}
125 | {inputs}
;
215 | }
216 | );
217 |
218 | export default AuthCode;
219 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 | > [!IMPORTANT]
3 | > After much consideration, I've come to the difficult decision that I will no longer be able to maintain this project due to my current time constraints. I sincerely apologize for any inconvenience this may cause and appreciate the understanding and support from the community. It's been a rewarding journey, and I'm grateful for the contributions and engagement of all involved. Thank you for your understanding.
4 |
5 | 
6 |
7 | # React Auth Code Input
8 |
9 | > One-time password (OTP) React component, zero dependencies, fully tested.
10 |
11 | [](https://www.npmjs.com/package/react-auth-code-input) [](https://standardjs.com)
12 | [](LICENSE.md)
13 | [](https://www.npmjs.com/package/react-auth-code-input)
14 | [](https://www.npmjs.com/package/react-auth-code-input)
15 | 
16 |
17 | ## Demo
18 |
19 | [Demo](https://www.luisguerrero.me/react-auth-code-input/)
20 |
21 | ## Install
22 |
23 | ```bash
24 | npm install --save react-auth-code-input
25 | ```
26 |
27 | or
28 |
29 | ```bash
30 | yarn add react-auth-code-input
31 | ```
32 |
33 | # Version 3+
34 |
35 | ## Basic Usage
36 |
37 | ```tsx
38 | import React, { useState } from 'react';
39 | import AuthCode from 'react-auth-code-input';
40 |
41 | const App = () => {
42 | const [result, setResult] = useState();
43 | const handleOnChange = (res: string) => {
44 | setResult(res);
45 | };
46 |
47 | return {inputs}
;\n }\n);\n\nexport default AuthCode;\n"],"names":["allowedCharactersValues","propsMap","alpha","type","inputMode","pattern","alphanumeric","numeric","min","max","AuthCode","forwardRef","ref","allowedCharacters","ariaLabel","autoFocus","containerClassName","disabled","inputClassName","isPassword","length","placeholder","onChange","isNaN","Error","some","value","inputsRef","useRef","inputProps","useImperativeHandle","focus","current","clear","i","sendResult","useEffect","res","map","input","join","handleOnChange","e","target","nextElementSibling","charAt","match","handleOnKeyDown","key","previousElementSibling","t","preventDefault","handleOnFocus","select","handleOnPaste","pastedValue","clipboardData","getData","currentInput","pastedCharacter","currentValue","inputs","push","React","onKeyDown","onFocus","onPaste","el","maxLength","className","autoComplete"],"mappings":"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"}
--------------------------------------------------------------------------------
/dist/index.modern.js.map:
--------------------------------------------------------------------------------
1 | {"version":3,"file":"index.modern.js","sources":["../src/index.tsx"],"sourcesContent":["import React, {\n useRef,\n useEffect,\n useImperativeHandle,\n forwardRef\n} from 'react';\n\nconst allowedCharactersValues = ['alpha', 'numeric', 'alphanumeric'] as const;\n\nexport type AuthCodeProps = {\n allowedCharacters?: typeof allowedCharactersValues[number];\n ariaLabel?: string;\n autoFocus?: boolean;\n containerClassName?: string;\n disabled?: boolean;\n inputClassName?: string;\n isPassword?: boolean;\n length?: number;\n placeholder?: string;\n onChange: (res: string) => void;\n};\n\ntype InputMode = 'text' | 'numeric';\n\ntype InputType = 'text' | 'tel' | 'password';\n\ntype InputProps = {\n type: InputType;\n inputMode: InputMode;\n pattern: string;\n min?: string;\n max?: string;\n};\n\nexport type AuthCodeRef = {\n focus: () => void;\n clear: () => void;\n};\n\nconst propsMap: { [key: string]: InputProps } = {\n alpha: {\n type: 'text',\n inputMode: 'text',\n pattern: '[a-zA-Z]{1}'\n },\n\n alphanumeric: {\n type: 'text',\n inputMode: 'text',\n pattern: '[a-zA-Z0-9]{1}'\n },\n\n numeric: {\n type: 'tel',\n inputMode: 'numeric',\n pattern: '[0-9]{1}',\n min: '0',\n max: '9'\n }\n};\n\nconst AuthCode = forwardRef{inputs}
;\n }\n);\n\nexport default AuthCode;\n"],"names":["allowedCharactersValues","propsMap","alpha","type","inputMode","pattern","alphanumeric","numeric","min","max","AuthCode","forwardRef","ref","allowedCharacters","ariaLabel","autoFocus","containerClassName","disabled","inputClassName","isPassword","length","placeholder","onChange","isNaN","Error","some","value","inputsRef","useRef","inputProps","useImperativeHandle","focus","current","clear","i","sendResult","useEffect","res","map","input","join","handleOnChange","e","target","nextElementSibling","charAt","match","handleOnKeyDown","key","previousElementSibling","t","preventDefault","handleOnFocus","select","handleOnPaste","pastedValue","clipboardData","getData","currentInput","pastedCharacter","currentValue","inputs","push","React","onKeyDown","onFocus","onPaste","el","maxLength","className","autoComplete"],"mappings":"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"}
--------------------------------------------------------------------------------
/src/index.test.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import '@testing-library/jest-dom';
4 |
5 | import { createEvent, fireEvent, render, screen } from '@testing-library/react';
6 | import userEvent from '@testing-library/user-event';
7 |
8 | import AuthCode from '.';
9 |
10 | describe('AuthCode', () => {
11 | it('should render the default component', () => {
12 | render(