Add a Survey to a React Application
This step-by-step tutorial will help you get started with the SurveyJS Form Library in a React application. To add a survey to your React application, follow the steps below:
- Install the
survey-react-ui
npm Package - Configure Styles
- Create a Model
- Render the Survey
- Handle Survey Completion
As a result, you will create a survey displayed below:
Install the survey-react-ui
npm Package
SurveyJS Form Library for React consists of two npm packages: survey-core
(platform-independent code) and survey-react-ui
(rendering code). Run the following command to install survey-react-ui
. The survey-core
package will be installed automatically as a dependency.
npm install survey-react-ui --save
Configure Styles
SurveyJS Form Library is shipped with several predefined themes illustrated below and a flexible theme customization mechanism based on CSS variables.
To add SurveyJS themes to your application, open the React component that will render your survey and import the Form Library style sheet:
import 'survey-core/defaultV2.min.css';
This style sheet applies the Default theme. If you want to apply a different predefined theme or create a custom theme, refer to the following help topic for detailed instructions: Themes & Styles.
Previous to v1.9.100, SurveyJS also supplied the Modern theme, which is now obsolete. Please migrate to one of the predefined themes or create a custom theme.
Create a Model
A model describes the layout and contents of your survey. The simplest survey model contains one or several questions without layout modifications.
Models are specified by model schemas (JSON objects). For example, the following model schema declares two textual questions, each with a title and a name. Titles are displayed on screen. Names are used to identify the questions in code.
const surveyJson = {
elements: [{
name: "FirstName",
title: "Enter your first name:",
type: "text"
}, {
name: "LastName",
title: "Enter your last name:",
type: "text"
}]
};
To instantiate a model, pass the model schema to the Model constructor as shown in the code below. The model instance will be later used to render the survey.
import { ..., Model } from 'survey-core';
// ...
function App() {
const survey = new Model(surveyJson);
return ... ;
}
View Full Code
import 'survey-core/defaultV2.min.css';
import { Model } from 'survey-core';
const surveyJson = {
elements: [{
name: "FirstName",
title: "Enter your first name:",
type: "text"
}, {
name: "LastName",
title: "Enter your last name:",
type: "text"
}]
};
function App() {
const survey = new Model(surveyJson);
return ...;
}
export default App;
Render the Survey
To render a survey, import the Survey
component, add it to the template, and pass the model instance you created in the previous step to the component's model
attribute:
import { Survey } from 'survey-react-ui';
// ...
const surveyJson = { ... };
function App() {
const survey = new Model(surveyJson);
return <Survey model={survey} />;
}
If you replicate the code correctly, you should see the following survey:
View Full Code
import 'survey-core/defaultV2.min.css';
import { Model } from 'survey-core';
import { Survey } from 'survey-react-ui';
const surveyJson = {
elements: [{
name: "FirstName",
title: "Enter your first name:",
type: "text"
}, {
name: "LastName",
title: "Enter your last name:",
type: "text"
}]
};
function App() {
const survey = new Model(surveyJson);
return <Survey model={survey} />;
}
export default App;
Handle Survey Completion
After a respondent completes a survey, the results are available within the onComplete event handler. In real-world applications, you should send the results to a server where they will be stored in a database and processed:
import { useCallback } from 'react';
// ...
const SURVEY_ID = 1;
function App() {
const survey = new Model(surveyJson);
const surveyComplete = useCallback((sender) => {
saveSurveyResults(
"https://your-web-service.com/" + SURVEY_ID,
sender.data
)
}, []);
survey.onComplete.add(surveyComplete);
return <Survey model={survey} />;
}
function saveSurveyResults(url, json) {
fetch(url, {
method: 'POST',
headers: {
'Content-Type': 'application/json;charset=UTF-8'
},
body: JSON.stringify(json)
})
.then(response => {
if (response.ok) {
// Handle success
} else {
// Handle error
}
})
.catch(error => {
// Handle error
});
}
In this tutorial, the results are simply output in an alert dialog:
import { useCallback } from 'react';
// ...
function App() {
const survey = new Model(surveyJson);
const alertResults = useCallback((sender) => {
const results = JSON.stringify(sender.data);
alert(results);
}, []);
survey.onComplete.add(alertResults);
return <Survey model={survey} />;
}
As you can see, survey results are saved in a JSON object. Its properties correspond to the name
property values of your questions in the model schema.
To view the application, run npm run start
in a command line and open http://localhost:3000/ in your browser.
View Full Code
import { useCallback } from 'react';
import 'survey-core/defaultV2.min.css';
import { Model } from 'survey-core';
import { Survey } from 'survey-react-ui';
const surveyJson = {
elements: [{
name: "FirstName",
title: "Enter your first name:",
type: "text"
}, {
name: "LastName",
title: "Enter your last name:",
type: "text"
}]
};
function App() {
const survey = new Model(surveyJson);
const alertResults = useCallback((sender) => {
const results = JSON.stringify(sender.data);
alert(results);
}, []);
survey.onComplete.add(alertResults);
return <Survey model={survey} />;
}
export default App;