Cart Licenses Contact Support Online Creator Login/Register
Try
Free
v 1.9.39

Add a Survey to a React Application

This step-by-step tutorial will help you get started with the SurveyJS Library in a React application. To add a survey to your React application, follow the steps below:

As a result, you will create a survey displayed below:

You can find the full code in the following GitHub repository: Get Started with SurveyJS - React.

Install the survey-react-ui npm Package

The SurveyJS 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 because it is listed in survey-react-ui dependencies.

npm install survey-react-ui --save

Configure Styles

SurveyJS ships with the Modern and Default V2 UI themes illustrated below.

Themes in SurveyJS Library

Open the React component in which your survey will be and import a style sheet that implements the required theme.

// Modern theme
import 'survey-core/modern.min.css';
// Default V2 theme
// import 'survey-core/defaultV2.min.css';

To apply the imported theme, call the applyTheme(themeName) method. Depending on the theme, pass "modern" or "defaultV2" as the method's argument. For instance, the following code applies the Modern theme:

import { StylesManager } from 'survey-core';

StylesManager.applyTheme("modern");

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 definitions (JSON objects). For example, the following model definition 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 definition 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/modern.min.css';
// import 'survey-core/defaultV2.min.css';
import { StylesManager, Model } from 'survey-core';

StylesManager.applyTheme("modern");

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:

Get Started with SurveyJS - Primitive Survey

View full code
import 'survey-core/modern.min.css';
// import 'survey-core/defaultV2.min.css';
import { StylesManager, Model } from 'survey-core';
import { Survey } from 'survey-react-ui';

StylesManager.applyTheme("modern");

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) {
  const request = new XMLHttpRequest();
  request.open('POST', url);
  request.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
  request.addEventListener('load', () => {
    // Handle "load"
  });
  request.addEventListener('error', () => {
    // Handle "error"
  });
  request.send(JSON.stringify(json));
}

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} />;
}

Get Started with SurveyJS - Survey Results

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 definition.

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/modern.min.css';
// import 'survey-core/defaultV2.min.css';
import { StylesManager, Model } from 'survey-core';
import { Survey } from 'survey-react-ui';

StylesManager.applyTheme("modern");

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;

View full code on GitHub

Further Reading

Tell Us What You Think

Help us serve you better by taking this brief survey.
We are interested to learn more about your
experience of using our libraries.

We'd really appreciate your feedback.

Start the Survey

Approximate time to complete: 2 min.