chore: Remove react-form package (#1952)

jdimovska · web-flow · commit e47bf8b0a408 · 2025-10-08T15:42:16.000+02:00
### 💡 Overview

Remove react-form and use native form implementation
diff --git a/sample-apps/react/react-dogfood/components/Feedback/Feedback.tsx b/sample-apps/react/react-dogfood/components/Feedback/Feedback.tsx
@@ -1,6 +1,5 @@
-import { HTMLInputTypeAttribute, useCallback, useMemo, useState } from 'react';
+import { FormEvent, useCallback, useState } from 'react';
 import clsx from 'clsx';
-import { useField, useForm } from 'react-form';
 import { Icon, useCall, useMenuContext } from '@stream-io/video-react-sdk';
 import { getCookie } from '../../helpers/getCookie';
 
@@ -10,89 +9,30 @@ export type Props = {
   inMeeting?: boolean;
 };
 
-function required(value: string | number, name: string) {
-  if (!value) {
-    return `Please enter a ${name}`;
-  }
-  return false;
-}
-
-const Input = (props: {
-  className?: string;
-  type: HTMLInputTypeAttribute;
-  placeholder: string;
-  name: string;
-  required?: boolean;
-}) => {
-  const { name, className, ...rest } = props;
-  const {
-    meta: { error, isTouched },
-    getInputProps,
-  } = useField(name, {
-    validate: props.required ? (value) => required(value, name) : undefined,
-  });
-
-  return (
-    <input
-      className={clsx(className, isTouched && error && 'rd__feedback-error')}
-      {...getInputProps()}
-      {...rest}
-    />
-  );
-};
-
-const TextArea = (props: {
-  placeholder: string;
-  name: string;
-  required?: boolean;
-}) => {
-  const { name, ...rest } = props;
-  const {
-    meta: { error, isTouched },
-    getInputProps,
-  } = useField(name, {
-    validate: props.required ? (value) => required(value, name) : undefined,
-  });
-
-  return (
-    <textarea
-      className={clsx(
-        'rd__feedback-textarea',
-        isTouched && error && 'rd__feedback-error',
-      )}
-      {...getInputProps()}
-      {...rest}
-    />
-  );
-};
-
-type FeedbackFormType = {
-  email?: string;
-  message?: string;
-};
-
 const basePath = process.env.NEXT_PUBLIC_BASE_PATH || '';
 
 export const Feedback = ({ callId, inMeeting = true }: Props) => {
   const [rating, setRating] = useState({ current: 0, maxAmount: 5 });
+  const [email, setEmail] = useState('');
+  const [message, setMessage] = useState('');
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
   const [feedbackSent, setFeedbackSent] = useState(false);
   const [errorMessage, setError] = useState<string | null>(null);
   const call = useCall();
-  const defaultValues = useMemo<FeedbackFormType>(
-    () => ({ email: '', message: '' }),
-    [],
-  );
-  const {
-    Form,
-    meta: { isSubmitting },
-  } = useForm({
-    defaultValues,
-    onSubmit: async (values: FeedbackFormType) => {
+
+  const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    setIsSubmitting(true);
+
+    try {
       await call
         ?.submitFeedback(Math.min(Math.max(1, rating.current), 5), {
-          reason: values.message,
+          reason: message,
           custom: {
-            ...values,
+            message,
+            email,
           },
         })
         .catch((err) => console.warn(`Failed to submit call feedback`, err));
@@ -101,31 +41,29 @@ export const Feedback = ({ callId, inMeeting = true }: Props) => {
       pageUrl.searchParams.set('meeting', inMeeting ? 'true' : 'false');
       pageUrl.searchParams.set('id', callId || call?.id || '');
 
-      const response = await fetch(
-        `https://getstream.io/api/crm/video_feedback/`,
-        {
-          method: 'POST',
-          headers: {
-            Accept: 'application/json',
-            'Content-Type': 'application/json',
-            'X-CSRFToken': getCookie('csrftoken') || '',
-          },
-          body: JSON.stringify({
-            email: values.email || 'anonymous-feedback@getstream.io',
-            message: values.message || '<no-message-provided>',
-            rating: rating.current,
-            page_url: pageUrl.toString(),
-          }),
+      await fetch(`https://getstream.io/api/crm/video_feedback/`, {
+        method: 'POST',
+        headers: {
+          Accept: 'application/json',
+          'Content-Type': 'application/json',
+          'X-CSRFToken': getCookie('csrftoken') || '',
         },
-      );
-      if (response.status >= 400) {
-        setError('Something went wrong, please try again.');
-      } else {
-        setFeedbackSent(true);
-      }
-    },
-    debugForm: false,
-  });
+        body: JSON.stringify({
+          email: email || 'anonymous-feedback@getstream.io',
+          message: message || '<no-message-provided>',
+          rating: rating.current,
+          page_url: pageUrl.toString(),
+        }),
+      });
+
+      setFeedbackSent(true);
+    } catch (error) {
+      console.warn(`Failed to submit call feedback`, error);
+      setError('Something went wrong, please try again.');
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
 
   const handleSetRating = useCallback((value: number) => {
     setRating((currentRating) => ({ ...currentRating, current: value }));
@@ -196,7 +134,7 @@ export const Feedback = ({ callId, inMeeting = true }: Props) => {
         {inMeeting && !errorMessage && 'How is your calling experience?'}
         {!inMeeting && !errorMessage && 'How was your calling experience?'}
       </p>
-      <Form className="rd__feedback-form">
+      <form className="rd__feedback-form" onSubmit={handleSubmit}>
         <div className="rd__feedback-rating-stars">
           {[...new Array(rating.maxAmount)].map((_, index) => {
             const grade = index + 1;
@@ -219,13 +157,21 @@ export const Feedback = ({ callId, inMeeting = true }: Props) => {
             );
           })}
         </div>
-        <Input
-          className="rd__feedback-input"
-          name="email"
+        <input
           type="email"
+          value={email}
           placeholder="Email"
+          id="feedback_input"
+          className="rd__feedback-input"
+          onChange={(e) => setEmail(e.target.value)}
+        />
+        <textarea
+          value={message}
+          placeholder="Message"
+          id="feedback_message"
+          className="rd__feedback-textarea"
+          onChange={(e) => setMessage(e.target.value)}
         />
-        <TextArea name="message" placeholder="Message" />
         <div className="rd__feedback-footer">
           <div className="rd__feedback-actions">
             {inMeeting ? (
@@ -247,7 +193,6 @@ export const Feedback = ({ callId, inMeeting = true }: Props) => {
                 Contact an expert
               </button>
             )}
-
             <button
               className="rd__button rd__button--primary"
               type="submit"
@@ -257,7 +202,7 @@ export const Feedback = ({ callId, inMeeting = true }: Props) => {
             </button>
           </div>
         </div>
-      </Form>
+      </form>
     </div>
   );
 };
diff --git a/sample-apps/react/react-dogfood/package.json b/sample-apps/react/react-dogfood/package.json
@@ -34,7 +34,6 @@
     "raw-body": "^3.0.0",
     "react": "19.0.0",
     "react-dom": "19.0.0",
-    "react-form": "^4.0.1",
     "stream-chat": "^9.6.1",
     "stream-chat-react": "^13.1.0",
     "swr": "^2.3.3",
@@ -45,7 +44,6 @@
     "@types/mapbox-gl": "^2.7.19",
     "@types/react": "^19.1.3",
     "@types/react-dom": "^19.1.3",
-    "@types/react-form": "^4.0.6",
     "@types/yargs": "^17.0.33",
     "rimraf": "^6.0.1",
     "sass": "^1.89.2",
diff --git a/yarn.lock b/yarn.lock
@@ -8792,7 +8792,6 @@ __metadata:
     "@types/mapbox-gl": "npm:^2.7.19"
     "@types/react": "npm:^19.1.3"
     "@types/react-dom": "npm:^19.1.3"
-    "@types/react-form": "npm:^4.0.6"
     "@types/yargs": "npm:^17.0.33"
     axios: "npm:^1.8.1"
     clsx: "npm:^2.0.0"
@@ -8810,7 +8809,6 @@ __metadata:
     raw-body: "npm:^3.0.0"
     react: "npm:19.0.0"
     react-dom: "npm:19.0.0"
-    react-form: "npm:^4.0.1"
     rimraf: "npm:^6.0.1"
     sass: "npm:^1.89.2"
     source-map-loader: "npm:^5.0.0"
@@ -9547,15 +9545,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react-form@npm:^4.0.6":
-  version: 4.0.6
-  resolution: "@types/react-form@npm:4.0.6"
-  dependencies:
-    "@types/react": "npm:*"
-  checksum: 10/1f4a4fc7ac66d968593bb7bfb36a76a02d178855269b984647a5ed9dbcde80f98c3627ea142e1ece351c4ee9d192f1c9d281a7f6253fcdb20249c6f022c00264
-  languageName: node
-  linkType: hard
-
 "@types/react-native-video@npm:^5.0.20":
   version: 5.0.20
   resolution: "@types/react-native-video@npm:5.0.20"
@@ -22869,16 +22858,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-form@npm:^4.0.1":
-  version: 4.0.1
-  resolution: "react-form@npm:4.0.1"
-  peerDependencies:
-    prop-types: ^15.5.4
-    react: ^16.8.3
-  checksum: 10/677b7ea812b557a116afe433f4d59c1c9c931bc866d35dd00d737df88f560557abd0ebb3295d51aa3a51266b774389f46e8c0909a46589963b914c84edcfe94b
-  languageName: node
-  linkType: hard
-
 "react-freeze@npm:^1.0.0":
   version: 1.0.3
   resolution: "react-freeze@npm:1.0.3"
