Multi Step Form | ⚛️ReactJS+🎨TailwindCSS+🌊Framer Motion

What are you most proud of, and what would you do differently next time?

👋 Hello FM Friends!

This project provided a great opportunity to learn about context in React.

• Context is used to define a state accessible throughout the application.

• Main Functions:

  • createContext: Used to define the context.
    • Example: FormContext = createContext()
  • useContext: Used to consume the context.

Provider and Consumer

• Provider:

  • Supplies the context.
  • Implemented using:

    
      {children}
    
    

  • Purpose:
    • Allows access to currentStep, setCurrentStep, formData, and updateFormData across the application.
    • Changes in one part of the application reflect in all parts using these values.

• Consumer:

  • To access contextualized states, use:

    const { currentStep, setCurrentStep, formData, updateFormData } = useContext(FormContext);
    

  • Functionality: Returns an object containing all data about the corresponding contextualized states.

Example Implementation

• FormProvider Component:

  export const FormProvider = ({ children }) => {
    const [currentStep, setCurrentStep] = useState(1);
    const [formData, setFormData] = useState({
      personalInfo: {
        name: '',
        email: '',
        phone: ''
      },
      plan: {
        type: 'arcade',
        isYearly: false
      },
      addons: []
    });
  
    const updateFormData = (step, data) => {
      setFormData(prev => ({
        ...prev,
        [step]: data
      }));
    };
  
    return (
      
        {children}
      
    );
  };
  

Wrapping the App

• Usage: Wrap your App component (or any component that requires the context) with FormProvider.

What specific areas of your project would you like help with?

Any feedback is appreciated