add react support

jackocnr · Jul 31, 2024 · d7db453 · d7db453
1 parent f065f46
commit d7db453
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 0 deletions.
diff --git a/react/src/intl-tel-input/react.tsx b/react/src/intl-tel-input/react.tsx
@@ -15,6 +15,7 @@ type ItiProps = {
   usePreciseValidation?: boolean;
   initOptions?: SomeOptions;
   inputProps?: object;
+  disabled?: boolean | undefined;
 };
 
 export type IntlTelInputRef = {
@@ -31,6 +32,7 @@ const IntlTelInput = forwardRef(function IntlTelInput({
   usePreciseValidation = false,
   initOptions = {},
   inputProps = {},
+  disabled = undefined,
 }: ItiProps, ref: React.ForwardedRef<IntlTelInputRef>) {
   const inputRef = useRef<HTMLInputElement | null>(null);
   const itiRef = useRef<Iti | null>(null);
@@ -87,6 +89,12 @@ const IntlTelInput = forwardRef(function IntlTelInput({
       }
     };
   }, [update]);
+
+  useEffect(() => {
+    if (itiRef.current && disabled !== undefined) {
+      itiRef.current.setDisabled(disabled);
+    }
+  }, [disabled]);
 
   return (
     <input

diff --git a/react/src/intl-tel-input/reactWithUtils.tsx b/react/src/intl-tel-input/reactWithUtils.tsx
@@ -16,6 +16,7 @@ type ItiProps = {
   usePreciseValidation?: boolean;
   initOptions?: SomeOptions;
   inputProps?: object;
+  disabled?: boolean | undefined;
 };
 
 export type IntlTelInputRef = {
@@ -32,6 +33,7 @@ const IntlTelInput = forwardRef(function IntlTelInput({
   usePreciseValidation = false,
   initOptions = {},
   inputProps = {},
+  disabled = undefined,
 }: ItiProps, ref: React.ForwardedRef<IntlTelInputRef>) {
   const inputRef = useRef<HTMLInputElement | null>(null);
   const itiRef = useRef<Iti | null>(null);
@@ -88,6 +90,12 @@ const IntlTelInput = forwardRef(function IntlTelInput({
       }
     };
   }, [update]);
+
+  useEffect(() => {
+    if (itiRef.current && disabled !== undefined) {
+      itiRef.current.setDisabled(disabled);
+    }
+  }, [disabled]);
 
   return (
     <input