'use client'; import React, { useState, useMemo } from 'react'; import { AnimatePresence, motion, MotionConfig } from 'motion/react'; import useMeasure from 'react-use-measure'; import classNames from 'classnames'; const SurveyHeader = ({ title, description, }: { title: string; description: string; }) => (

{title}

{description}

); const SurveyButton = ({ onClick, children, variant = 'primary', }: { onClick: () => void; children: React.ReactNode; variant?: 'primary' | 'secondary'; }) => ( ); const RateExperience = ({ selectedRating, onRatingClick, onNext, }: { selectedRating: number | null; onRatingClick: (rating: number) => void; onNext: () => void; }) => (

{['😠', '😟', '😐', '😊', '😆'].map((emoji, index) => ( ))}

); const Feedback = ({ feedbackContent, onFeedbackChange, onPrev, onSubmit, }: { feedbackContent: string; onFeedbackChange: (event: React.ChangeEvent) => void; onPrev: () => void; onSubmit: () => void; }) => (

<div className="flex w-full gap-2">
      <SurveyButton variant={'secondary'} onClick={onPrev}>
        Back
      </SurveyButton>
      <SurveyButton onClick={onSubmit}>Submit</SurveyButton>
    </div>
  </div>
);

const SURVEY_CONFIG = [
  {
    title: 'How would you rate this app?',
    description:
      'How satisfied are you with our app, please rate your experience.',
    component: RateExperience,
  },
  {
    title: "What's your overall experience?",
    description:
      'Please share your thoughts on your experience with this app.',
    component: Feedback,
  },
];

export const MultiStepSurvey: React.FC = () => {
  const [currentStep, setCurrentStep] = useState(0);
  const [direction, setDirection] = useState(0);
  const [ref, bounds] = useMeasure();
  const [selectedRating, setSelectedRating] = useState<number | null>(null);
  const [feedbackContent, setFeedbackContent] = useState('');

const handleNext = () => {
    setDirection(1);
    setCurrentStep((prev) => prev + 1);
  };

const handlePrev = () => {
    if (currentStep > 0) {
      setDirection(-1);
      setCurrentStep((prev) => prev - 1);
    }
  };

const handleSubmit = () => {
    console.log('Feedback submitted:', {
      rating: selectedRating,
      feedback: feedbackContent,
    });
  };

return (
    <MotionConfig transition={{ duration: 1, type: 'spring', bounce: 0 }}>
      <motion.div
        animate={{ height: bounds.height }}
        className="relative max-w-[420px] overflow-hidden rounded-xl border shadow"
      >
        <div className="p-6" ref={ref}>
          <AnimatePresence mode="popLayout" initial={false} custom={direction}>
            <motion.div
              key={currentStep}
              variants={{
                initial: (direction: number) => ({
                  x: `${110 * direction}%`,
                  opacity: 0,
                }),
                active: { x: '0%', opacity: 1 },
                exit: (direction: number) => ({
                  x: `${-110 * direction}%`,
                  opacity: 0,
                }),
              }}
              initial="initial"
              animate="active"
              exit="exit"
              custom={direction}
            >
              {content}
            </motion.div>
          </AnimatePresence>
        </div>
      </motion.div>
    </MotionConfig>
  );
};

export default MultiStepSurvey;
</article></body></html>

Multi Step Survey

Resources