react-simple-otp
Version:
React OTP input
1 lines • 6.62 kB
Source Map (JSON)
{"version":3,"file":"index.js","sources":["../src/OTPField.js"],"sourcesContent":["import React, { useState, useRef, useEffect } from 'react'\n\nconst OTPField = ({\n value,\n inputStyle,\n length,\n onSubmit,\n enableClearAll,\n autoFocus,\n clearAllButton,\n clearAllButtonStyle,\n inputFieldClassName,\n clearAllButtonClassName,\n onChange\n}) => {\n const [otp, setOtp] = useState(new Array(length).fill(''))\n\n let refs = []\n otp.map((l, index) => {\n refs[index] = useRef(null)\n })\n\n const submitOnEnter = () => {\n onSubmit(otp.join(''))\n }\n\n useEffect(() => {\n if (!value) {\n setOtp(new Array(length).fill(''))\n refs[0].current.focus()\n }\n }, [value])\n\n useEffect(() => {\n onChange(otp.join(''))\n }, [otp])\n\n return (\n <div style={{ display: 'flex' }}>\n {otp.map((otpField, index) => (\n <input\n key={index}\n className={inputFieldClassName}\n ref={refs[index]}\n style={inputStyle}\n maxLength={1}\n autoFocus={index === 0 && autoFocus ? true : false}\n value={otp[index]}\n onKeyDown={(evt) => {\n if (evt.keyCode === 8) {\n evt.preventDefault()\n let newOtp = [...otp]\n let doesValueExist = newOtp[index]\n newOtp[index] = ''\n index - 1 >= 0 &&\n !doesValueExist &&\n refs[index - 1].current.focus()\n if (index - 1 >= 0 && !doesValueExist) newOtp[index - 1] = ''\n setOtp(newOtp)\n }\n if (index + 1 === length && evt.keyCode === 13) {\n submitOnEnter()\n }\n }}\n onChange={(evt) => {\n let newOtp = [...otp]\n newOtp[index] = evt.target.value\n setOtp(newOtp)\n evt.target.value !== '' &&\n index + 1 < length &&\n refs[index + 1].current.focus()\n }}\n />\n ))}\n {enableClearAll && (\n <button\n style={clearAllButtonStyle}\n className={clearAllButtonClassName}\n onClick={() => {\n let newOtp = new Array(length).fill('')\n setOtp(newOtp)\n refs[0].current.focus()\n }}\n >\n {clearAllButton}\n </button>\n )}\n </div>\n )\n}\n\nOTPField.defaultProps = {\n value: '',\n inputStyle: {\n outline: 'none',\n textAlign: 'center',\n width: '2rem',\n height: '30px',\n fontSize: '20px'\n },\n inputFieldClassName: '',\n onSubmit: () => {},\n enableClearAll: false,\n autoFocus: true,\n clearAllButton: 'Clear',\n clearAllButtonStyle: {\n cursor: 'pointer'\n },\n clearAllButtonClassName: '',\n onChange: () => {}\n}\n\nexport default OTPField\n"],"names":["OTPField","value","inputStyle","length","onSubmit","enableClearAll","autoFocus","clearAllButton","clearAllButtonStyle","inputFieldClassName","clearAllButtonClassName","onChange","useState","Array","fill","otp","setOtp","refs","map","l","index","useRef","submitOnEnter","join","useEffect","current","focus","React","display","otpField","evt","keyCode","preventDefault","newOtp","doesValueExist","target","defaultProps","outline","textAlign","width","height","fontSize","cursor"],"mappings":"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"}