React useFormState: फॉर्म स्टेट मॅनेजमेंटसाठी एक सर्वसमावेशक मार्गदर्शक

फॉर्म्स हे जवळजवळ प्रत्येक वेब ऍप्लिकेशनचा एक मूलभूत भाग आहेत. ते वापरकर्त्यांना ऍप्लिकेशनशी संवाद साधण्याची, डेटा सबमिट करण्याची आणि विविध क्रिया करण्याची परवानगी देतात. मजबूत आणि वापरकर्त्यासाठी अनुकूल फॉर्म तयार करण्यासाठी फॉर्म स्टेट प्रभावीपणे व्यवस्थापित करणे महत्त्वाचे आहे. React चा useFormState हुक फॉर्म स्टेट मॅनेजमेंट सोपे करण्यासाठी एक शक्तिशाली आणि सुलभ उपाय प्रदान करतो.

useFormState म्हणजे काय?

useFormState हा एक React हुक आहे जो फॉर्म व्हॅल्यूज साठवण्यासाठी आणि अपडेट करण्यासाठी, इनपुटमधील बदल ट्रॅक करण्यासाठी, व्हॅलिडेशन हाताळण्यासाठी आणि सबमिशन स्टेट मॅनेज करण्यासाठी एक केंद्रीय जागा प्रदान करून फॉर्म स्टेट मॅनेजमेंट सोपे करतो. हे बॉयलरप्लेट कोड कमी करून आणि कोडची वाचनीयता सुधारून जटिल फॉर्म तयार करण्याची प्रक्रिया सुलभ करते.

प्रत्येक फॉर्म फील्डसाठी useState वापरण्याच्या पारंपारिक पद्धतींच्या तुलनेत, useFormState अनेक फायदे देतो:

• केंद्रीकृत स्टेट (Centralized State): सर्व फॉर्म डेटा एकाच स्टेट ऑब्जेक्टमध्ये व्यवस्थापित करते, ज्यामुळे संघटन सुधारते आणि गुंतागुंत कमी होते.
• सोपे अपडेट्स (Simplified Updates): एकाच वेळी अनेक फॉर्म फील्ड्स अपडेट करण्याचा सोयीस्कर मार्ग प्रदान करते.
• अंगभूत व्हॅलिडेशन (Built-in Validation): फॉर्म व्हॅलिडेशनसाठी अंगभूत समर्थन देते, ज्यामुळे तुम्ही फॉर्म डेटा सहजपणे व्हॅलिडेट करू शकता आणि एरर मेसेज दाखवू शकता.
• सबमिशन हँडलिंग (Submission Handling): फॉर्म सबमिशन स्टेट व्यवस्थापित करण्यासाठी यंत्रणा प्रदान करते, जसे की फॉर्म सध्या सबमिट होत आहे की नाही किंवा आधीच सबमिट झाला आहे की नाही हे ट्रॅक करणे.
• सुधारित वाचनीयता (Improved Readability): फॉर्म लॉजिक सोपे करते, ज्यामुळे ते समजणे आणि मेन्टेन करणे सोपे होते.

मूलभूत वापर

चला एका सोप्या उदाहरणाने सुरुवात करूया की useFormState दोन इनपुट फील्ड्स: नाव आणि ईमेल असलेल्या साध्या फॉर्ममध्ये कसे वापरावे.

इन्स्टॉलेशन

प्रथम, आपल्याला useFormState हुक इन्स्टॉल करावा लागेल. ते इन्स्टॉल करण्याची पद्धत आपण वापरत असलेल्या लायब्ररी किंवा फ्रेमवर्कवर अवलंबून असेल (उदा. React Hook Form, Formik with a custom hook, किंवा तत्सम उपाय). हे उदाहरण react-form-state नावाच्या एका काल्पनिक लायब्ररीचा वापर करते (आपल्या वास्तविक लायब्ररीने बदला):

            npm install react-form-state

            

              
                Copy
              
            
          

उदाहरण कोड

            import React from 'react';
import { useFormState } from 'react-form-state';

function MyForm() {
  const { values, errors, touched, handleChange, handleSubmit, isSubmitting } = useFormState({
    initialValues: {
      name: '',
      email: '',
    },
    onSubmit: async (values) => {
      // Simulate an API call
      await new Promise((resolve) => setTimeout(resolve, 1000));
      alert(JSON.stringify(values));
    },
    validate: (values) => {
      const errors = {};
      if (!values.name) {
        errors.name = 'Name is required';
      }
      if (!values.email) {
        errors.email = 'Email is required';
      } else if (!/^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/.test(values.email)) {
        errors.email = 'Invalid email format';
      }
      return errors;
    },
  });

  return (
    

      

        Name:
        
        {touched.name && errors.name && {errors.name}}
      
      

        Email:
        
        {touched.email && errors.email && {errors.email}}
      
      
        {isSubmitting ? 'Submitting...' : 'Submit'}
      
    
  );
}

export default MyForm;

            

              
                Copy
              
            
          

स्पष्टीकरण

• useFormState इम्पोर्ट करा: आम्ही react-form-state लायब्ररीमधून useFormState हुक इम्पोर्ट करतो.
• हुक सुरू करा: आम्ही एका ऑप्शन्स ऑब्जेक्टसह useFormState कॉल करतो. या ऑब्जेक्टमध्ये हे समाविष्ट आहे:
• initialValues: एक ऑब्जेक्ट जो फॉर्म फील्ड्सच्या सुरुवातीच्या व्हॅल्यूजची व्याख्या करतो.
• onSubmit: एक फंक्शन जे फॉर्म सबमिट केल्यावर कॉल केले जाते. याला फॉर्म व्हॅल्यूज एक आर्ग्युमेंट म्हणून मिळतात. या उदाहरणात, आम्ही setTimeout सह API कॉलचे अनुकरण करतो.
• validate: एक फंक्शन जे फॉर्म व्हॅल्यूज व्हॅलिडेट करते. याने एक ऑब्जेक्ट परत करावा जिथे कीज फील्डची नावे असतील आणि व्हॅल्यूज एरर मेसेज असतील. जर एखादे फील्ड व्हॅलिड असेल, तर ते परत केलेल्या ऑब्जेक्टमध्ये समाविष्ट नसावे.
• व्हॅल्यूज डिस्ट्रक्चर करा: आम्ही useFormState च्या रिटर्न व्हॅल्यूला डिस्ट्रक्चर करून खालील व्हॅल्यूज मिळवतो:
• values: फॉर्म फील्ड्सच्या वर्तमान व्हॅल्यूज असलेला एक ऑब्जेक्ट.
• errors: कोणत्याही व्हॅलिडेशन एरर्स असलेला एक ऑब्जेक्ट.
• touched: कोणते फील्ड्स टच झाले आहेत (म्हणजे, फोकस केले गेले आणि नंतर ब्लर झाले) हे दर्शवणारा एक ऑब्जेक्ट.
• handleChange: इनपुट फील्ड्स बदलल्यावर फॉर्म व्हॅल्यूज अपडेट करणारे एक फंक्शन.
• handleSubmit: फॉर्म सबमिशन हाताळणारे एक फंक्शन.
• isSubmitting: फॉर्म सध्या सबमिट होत आहे की नाही हे दर्शवणारे एक बुलियन.
• फॉर्म रेंडरिंग: आम्ही इनपुट फील्ड्ससह फॉर्म रेंडर करतो. प्रत्येक इनपुट फील्ड values ऑब्जेक्ट आणि handleChange फंक्शनशी जोडलेले आहे.
• एरर डिस्प्ले: जर फील्ड टच झाले असेल आणि त्यात एरर असेल तर आम्ही प्रत्येक फील्डसाठी एरर मेसेज दाखवतो.
• सबमिट बटण: फॉर्म सबमिट होत असताना सबमिट बटण डिसेबल केले जाते.

प्रगत वैशिष्ट्ये

useFormState अधिक जटिल फॉर्म परिस्थिती हाताळण्यासाठी विविध प्रगत वैशिष्ट्ये प्रदान करते.

कस्टम व्हॅलिडेशन

validate फंक्शन तुम्हाला कस्टम व्हॅलिडेशन लॉजिक लागू करण्याची परवानगी देते. तुम्ही जटिल व्हॅलिडेशन तपासण्या करू शकता, जसे की डेटाबेस विरुद्ध व्हॅलिडेट करणे किंवा रेग्युलर एक्सप्रेशन वापरणे. उदाहरणार्थ, देश कोडवर आधारित फोन नंबर व्हॅलिडेट करणे:

            const validate = (values) => {
  const errors = {};
  if (!values.phoneNumber) {
    errors.phoneNumber = 'Phone number is required';
  } else {
    // Example: Validate US phone number format
    if (values.countryCode === 'US' && !/^\d{3}-\d{3}-\d{4}$/.test(values.phoneNumber)) {
      errors.phoneNumber = 'Invalid US phone number format (e.g., 123-456-7890)';
    }
    // Example: Validate UK phone number format
    if (values.countryCode === 'UK' && !/^\d{5} \d{6}$/.test(values.phoneNumber)) {
      errors.phoneNumber = 'Invalid UK phone number format (e.g., 01632 960001)';
    }
    // More country-specific validation can be added here
  }
  return errors;
};

            

              
                Copy
              
            
          

अस सिंक्रोनस व्हॅलिडेशन

ज्या व्हॅलिडेशनसाठी असिंक्रोनस ऑपरेशन्स आवश्यक आहेत (उदा. युझरनेम उपलब्ध आहे की नाही हे तपासणे), तुम्ही असिंक्रोनस validate फंक्शन वापरू शकता.

            const validate = async (values) => {
  const errors = {};
  // Simulate an API call to check username availability
  const isUsernameAvailable = await checkUsernameAvailability(values.username);
  if (!isUsernameAvailable) {
    errors.username = 'Username is already taken';
  }
  return errors;
};

async function checkUsernameAvailability(username) {
  // Replace with your actual API call
  await new Promise((resolve) => setTimeout(resolve, 500));
  // Simulate username taken
  return username !== 'taken_username';
}

            

              
                Copy
              
            
          

डायनॅमिक फॉर्म्स

useFormState चा वापर डायनॅमिक फॉर्म्स तयार करण्यासाठी केला जाऊ शकतो जिथे वापरकर्त्याच्या परस्परसंवादावर आधारित फॉर्म फील्ड्स जोडले किंवा काढले जातात. हे विशेषतः बदलत्या संख्येच्या इनपुट फील्ड्स असलेल्या फॉर्म्ससाठी उपयुक्त आहे.

            import React, { useState } from 'react';
import { useFormState } from 'react-form-state';

function DynamicForm() {
  const [items, setItems] = useState(['item1']);

  const { values, handleChange, handleSubmit } = useFormState({
    initialValues: items.reduce((acc, item) => {
      acc[item] = '';
      return acc;
    }, {}),
    onSubmit: (values) => {
      alert(JSON.stringify(values));
    },
  });

  const addItem = () => {
    const newItem = `item${items.length + 1}`;
    setItems([...items, newItem]);
  };

  return (
    

      {items.map((item) => (
        

          {item}:
          
        
      ))}
      
        Add Item
      
      Submit
    
  );
}

export default DynamicForm;

            

              
                Copy
              
            
          

अ‍ॅरे फील्ड्स हाताळणे

जेव्हा तुमच्या फॉर्ममध्ये अ‍ॅरे फील्ड्स (उदा. हॉबीज किंवा स्किल्सची यादी) समाविष्ट असतात, तेव्हा useFormState या अ‍ॅरे व्हॅल्यूज कार्यक्षमतेने व्यवस्थापित करण्यासाठी जुळवून घेतले जाऊ शकते. येथे एक उदाहरण आहे:

            import React from 'react';
import { useFormState } from 'react-form-state';

function SkillsForm() {
  const { values, handleChange, handleSubmit } = useFormState({
    initialValues: {
      skills: [''], // Start with one empty skill
    },
    onSubmit: (values) => {
      alert(JSON.stringify(values));
    },
  });

  const addSkill = () => {
    handleChange({ target: { name: 'skills', value: [...values.skills, ''] } });
  };

  const updateSkill = (index, value) => {
    const newSkills = [...values.skills];
    newSkills[index] = value;
    handleChange({ target: { name: 'skills', value: newSkills } });
  };

  return (
    

      Skills:
      {values.skills.map((skill, index) => (
        

           updateSkill(index, e.target.value)}
          />
        
      ))}
      
        Add Skill
      
      Submit
    
  );
}

export default SkillsForm;

            

              
                Copy
              
            
          

अ‍ॅक्सेसिबिलिटी विचार

फॉर्म तयार करताना, अ‍ॅक्सेसिबिलिटीचा विचार करणे महत्त्वाचे आहे जेणेकरून दिव्यांग वापरकर्ते फॉर्म प्रभावीपणे वापरू शकतील. येथे काही अ‍ॅक्सेसिबिलिटी टिप्स आहेत:

• सिमँटिक HTML वापरा: <label>, <input>, <textarea>, आणि <button> सारखे योग्य HTML घटक वापरा.
• सर्व फॉर्म फील्ड्ससाठी लेबल्स द्या: फॉर्म फील्ड्सशी लेबल्स जोडण्यासाठी <label> घटक वापरा. लेबलचा for ऍट्रिब्यूट इनपुट फील्डच्या id ऍट्रिब्यूटशी जुळतो याची खात्री करा.
• ARIA ऍट्रिब्यूट्स वापरा: सहाय्यक तंत्रज्ञानाला फॉर्म फील्ड्सबद्दल अतिरिक्त माहिती देण्यासाठी ARIA ऍट्रिब्यूट्स वापरा. उदाहरणार्थ, एरर मेसेज फॉर्म फील्ड्सशी जोडण्यासाठी aria-describedby वापरा.
• स्पष्ट आणि संक्षिप्त एरर मेसेज द्या: एरर मेसेज समजण्यास सोपे असावेत आणि चुका कशा सुधाराव्यात यावर मार्गदर्शन करणारे असावेत.
• पुरेसा कलर कॉन्ट्रास्ट सुनिश्चित करा: मजकूर आणि पार्श्वभूमीच्या रंगांमध्ये पुरेसा कलर कॉन्ट्रास्ट वापरा जेणेकरून फॉर्म दृष्टिहीन वापरकर्त्यांसाठी वाचनीय असेल.
• सहाय्यक तंत्रज्ञानासह चाचणी करा: फॉर्म दिव्यांग वापरकर्त्यांसाठी अ‍ॅक्सेसिबल आहे की नाही हे सुनिश्चित करण्यासाठी स्क्रीन रीडरसारख्या सहाय्यक तंत्रज्ञानासह फॉर्मची चाचणी करा.

सर्वोत्तम पद्धती

येथे useFormState वापरण्यासाठी काही सर्वोत्तम पद्धती आहेत:

• validate फंक्शन शुद्ध ठेवा: validate फंक्शन एक शुद्ध फंक्शन असावे, म्हणजे त्याचे कोणतेही साइड इफेक्ट्स नसावेत आणि समान इनपुटसाठी नेहमी समान आउटपुट परत करावे.
• मेमोइझेशन वापरा: फॉर्मच्या कामगिरीला ऑप्टिमाइझ करण्यासाठी मेमोइझेशन वापरा. मेमोइझेशन फॉर्म घटकांच्या अनावश्यक री-रेंडर्सना प्रतिबंधित करण्यास मदत करू शकते.
• एकसमान नामकरण पद्धत वापरा: फॉर्म फील्ड्स आणि व्हॅलिडेशन एरर्ससाठी एकसमान नामकरण पद्धत वापरा. यामुळे कोड वाचणे आणि मेन्टेन करणे सोपे होईल.
• युनिट टेस्ट लिहा: फॉर्म योग्यरित्या काम करत आहे याची खात्री करण्यासाठी युनिट टेस्ट लिहा. युनिट टेस्ट डेव्हलपमेंट प्रक्रियेच्या सुरुवातीलाच एरर्स पकडण्यात मदत करू शकतात.
• आंतरराष्ट्रीयीकरणाचा (i18n) विचार करा: जागतिक ऍप्लिकेशन्ससाठी, तुमचे फॉर्म लेबल्स, मेसेजेस आणि व्हॅलिडेशन नियम एकाधिक भाषांना समर्थन देतात याची खात्री करा. react-intl किंवा i18next सारख्या लायब्ररीज यामध्ये मदत करू शकतात.

आंतरराष्ट्रीय उदाहरणे

जागतिक स्तरावर फॉर्म्सवर काम करताना, आंतरराष्ट्रीयीकरण आणि स्थानिकीकरणाचा विचार करणे महत्त्वाचे आहे. विविध आंतरराष्ट्रीय फॉर्म आवश्यकता कशा हाताळायच्या याची काही उदाहरणे येथे आहेत:

• फोन नंबर: वेगवेगळ्या देशांमध्ये वेगवेगळे फोन नंबर फॉरमॅट असतात. देशाच्या कोडवर आधारित फोन नंबर व्हॅलिडेट करण्यासाठी libphonenumber-js सारखी लायब्ररी वापरा.
• पोस्टल कोड: पोस्टल कोड देशानुसार खूप भिन्न असतात. काही देश अंकीय पोस्टल कोड वापरतात, तर काही अल्फान्यूमेरिक कोड वापरतात. वेगवेगळ्या पोस्टल कोड फॉरमॅटला समर्थन देणारे व्हॅलिडेशन लॉजिक लागू करा.
• तारीख फॉरमॅट: तारीख फॉरमॅट संस्कृतीनुसार बदलतात. काही देश MM/DD/YYYY फॉरमॅट वापरतात, तर काही DD/MM/YYYY फॉरमॅट वापरतात. वापरकर्त्याच्या लोकेलवर आधारित तारखा फॉरमॅट आणि पार्स करण्यासाठी moment.js किंवा date-fns सारखी लायब्ररी वापरा.
• पत्ता फॉरमॅट: पत्ता फॉरमॅट देखील देशानुसार बदलतात. काही देशांना पहिल्या ओळीवर रस्त्याचा पत्ता आवश्यक असतो, तर काहींना पहिल्या ओळीवर शहर आणि पोस्टल कोड आवश्यक असतो. वापरकर्त्याच्या देशावर आधारित पत्ते फॉरमॅट करण्यासाठी लायब्ररी किंवा API वापरा.
• चलन फॉरमॅट: वापरकर्त्याच्या लोकेलसाठी योग्य फॉरमॅटमध्ये चलन मूल्ये प्रदर्शित करा. चलन मूल्ये फॉरमॅट करण्यासाठी Intl.NumberFormat API वापरा.

उदाहरणार्थ, एका नोंदणी फॉर्मचा विचार करा ज्याला फोन नंबर गोळा करायचा आहे. एकाच "फोन नंबर" फील्डऐवजी, "कंट्री कोड" आणि "फोन नंबर" साठी स्वतंत्र फील्ड असणे फायदेशीर ठरू शकते, जे स्थानिक फॉरमॅटनुसार जुळवून घेण्यासाठी व्हॅलिडेशन लायब्ररीसह जोडलेले असेल.

useFormState चे पर्याय

useFormState फॉर्म स्टेट मॅनेजमेंटसाठी सोयीस्कर उपाय देत असले तरी, इतर लोकप्रिय लायब्ररीज आणि पद्धती आहेत ज्यांचा तुम्ही विचार करू शकता:

• Formik: एक मोठ्या प्रमाणावर वापरली जाणारी लायब्ररी जी स्टेट मॅनेजमेंट, व्हॅलिडेशन आणि सबमिशन हँडलिंगसह सर्वसमावेशक फॉर्म मॅनेजमेंट वैशिष्ट्ये प्रदान करते.
• React Hook Form: एक कार्यक्षम लायब्ररी जी React च्या useRef हुकचा फायदा घेऊन री-रेंडर्स कमी करते आणि फॉर्मची कामगिरी सुधारते.
• Redux Form: एक लायब्ररी जी फॉर्म स्टेट मॅनेज करण्यासाठी Redux सह एकत्रित होते. जर तुम्ही तुमच्या ऍप्लिकेशनमध्ये आधीच Redux वापरत असाल तर हा एक चांगला पर्याय आहे.
• कस्टम हुक्स: तुम्ही फॉर्म स्टेट मॅनेज करण्यासाठी तुमचे स्वतःचे कस्टम हुक्स तयार करू शकता. हे तुम्हाला सर्वात जास्त लवचिकता देते परंतु अधिक प्रयत्नांची आवश्यकता असते.

निष्कर्ष

React चा useFormState हुक फॉर्म स्टेट मॅनेजमेंट सोपे करण्यासाठी एक शक्तिशाली आणि सुलभ उपाय प्रदान करतो. स्टेट केंद्रीकृत करून, अपडेट्स सोपे करून, अंगभूत व्हॅलिडेशन प्रदान करून आणि सबमिशन स्टेट मॅनेज करून, useFormState तुमच्या React फॉर्म्सचा डेव्हलपमेंट अनुभव आणि कोड गुणवत्ता लक्षणीयरीत्या सुधारू शकतो.

तुम्ही साधे फॉर्म तयार करत असाल किंवा डायनॅमिक फील्ड्स आणि आंतरराष्ट्रीयीकरणाच्या आवश्यकता असलेले जटिल फॉर्म तयार करत असाल, useFormState तुम्हाला मजबूत, अ‍ॅक्सेसिबल आणि वापरकर्त्यासाठी अनुकूल फॉर्म सहजतेने तयार करण्यात मदत करू शकतो. तुमच्या विशिष्ट प्रोजेक्टच्या आवश्यकतांचा विचार करा आणि तुमच्या गरजांसाठी सर्वोत्तम दृष्टिकोन निवडा. तुमचे फॉर्म सर्वांसाठी वापरण्यायोग्य आहेत याची खात्री करण्यासाठी अ‍ॅक्सेसिबिलिटी आणि आंतरराष्ट्रीयीकरणाला प्राधान्य देण्याचे लक्षात ठेवा, मग त्यांची क्षमता किंवा स्थान काहीही असो.