update forward ref

Author: hunghg255

dist/cjs/index.d.ts

@@ -19,5 +19,8 @@ interface IOtpInput {
     'data-testid'?: string;
     'data-cy'?: string;
 }
-declare const OtpInput: (props: IOtpInput) => import("react/jsx-runtime").JSX.Element;
+export type OtpInputHandle = {
+    focusInput: (index: number) => void;
+};
+declare const OtpInput: React.ForwardRefExoticComponent<IOtpInput & React.RefAttributes<OtpInputHandle>>;
 export { OtpInput };

dist/cjs/index.js

@@ -19,5 +19,8 @@ interface IOtpInput {
     'data-testid'?: string;
     'data-cy'?: string;
 }
-declare const OtpInput: (props: IOtpInput) => import("react/jsx-runtime").JSX.Element;
+export type OtpInputHandle = {
+    focusInput: (index: number) => void;
+};
+declare const OtpInput: React.ForwardRefExoticComponent<IOtpInput & React.RefAttributes<OtpInputHandle>>;
 export { OtpInput };

dist/cjs/index.js.map

@@ -1,4 +1,3 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import React from 'react';
 
 interface IOtpInput {
@@ -21,6 +20,9 @@ interface IOtpInput {
     'data-testid'?: string;
     'data-cy'?: string;
 }
-declare const OtpInput: (props: IOtpInput) => react_jsx_runtime.JSX.Element;
+type OtpInputHandle = {
+    focusInput: (index: number) => void;
+};
+declare const OtpInput: React.ForwardRefExoticComponent<IOtpInput & React.RefAttributes<OtpInputHandle>>;
 
-export { OtpInput };
+export { OtpInput, OtpInputHandle };

dist/esm/index.d.ts

@@ -1,6 +1,6 @@
 {
   "name": "reactjs-otp-input",
-  "version": "2.0.4",
+  "version": "2.0.6",
   "description": "A fully customizable, one-time password input component for the web built with React",
   "scripts": {
     "build": "rollup -c",

dist/esm/index.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useRef, useState } from 'react';
+import React, { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 
 const BACKSPACE = 8;
 const LEFT_ARROW = 37;
@@ -140,7 +140,11 @@ const SingleOtpInput = (props: ISingleOtpInput) => {
   );
 };
 
-const OtpInput = (props: IOtpInput) => {
+export type OtpInputHandle = {
+  focusInput: (index: number) => void;
+};
+
+const OtpInput = forwardRef<OtpInputHandle, IOtpInput>((props, ref) => {
   const {
     numInputs = 4,
     onChange = (otp: string) => console.log(otp),
@@ -183,6 +187,12 @@ const OtpInput = (props: IOtpInput) => {
     return '';
   }, [placeholder]);
 
+  useImperativeHandle(ref, () => {
+    return {
+      focusInput,
+    };
+  });
+
   // Helper to return OTP from input
   const handleOtpChange = (otp: string[]) => {
     const otpValue = otp.join('');
@@ -347,6 +357,6 @@ const OtpInput = (props: IOtpInput) => {
       })}
     </div>
   );
-};
+});
 
 export { OtpInput };