survey-react-ui

import React, { useState, useEffect } from 'react'; import { Survey } from 'survey-react-ui'; import { Model } from 'survey-core'; import 'survey-core/defaultV2.min.css'; // Or 'survey-core/modern.min.css' const surveyJson = { title: 'Sample Survey', description: 'Please answer the following questions.', pages: [ { name: 'page1', elements: [ { type: 'text', name: 'name', title: 'What is your name?', isRequired: true }, { type: 'dropdown', name: 'country', title: 'Which country do you live in?', choices: ['USA', 'Canada', 'Mexico', 'Germany', 'France'], isRequired: true } ] }, { name: 'page2', elements: [ { type: 'comment', name: 'feedback', title: 'Any additional feedback?' } ] } ] }; export default function MySurveyComponent() { const [surveyModel, setSurveyModel] = useState(null); const [surveyResults, setSurveyResults] = useState(null); useEffect(() => { const model = new Model(surveyJson); model.onComplete.add((sender, options) => { console.log('Survey results:', sender.data); setSurveyResults(sender.data); // In a real app, you would send sender.data to your backend }); setSurveyModel(model); }, []); if (!surveyModel) { return <div>Loading survey...</div>; } return ( <div> {surveyResults ? ( <div> <h2>Thank you for completing the survey!</h2> <pre>{JSON.stringify(surveyResults, null, 2)}</pre> </div> ) : ( <Survey model={surveyModel} /> )} </div> ); }