React Simple Survey

React Simple Survey is an easy-to-use survey renderer.

How to create a survey

You first have to build the survey. A ReactSimpleSurvey object is build from one or multiple SurveyScreen objects, in which ones you will describe the screen title, the catchphrase or any information you want, and the form fields and their validation requirements.

Here's a simple example :

const survey = new ReactSimpleSurvey("My first survey")
.addScreen(
  new SurveyScreen({
      name: "About you",
      question: "What's your name ?"
  })
  .addField(
    "input", 
    { name: 'First name', placeholder: 'Your first name' },
    { between: [2, 30], required: true }
  )
)

As you see, we're first creating a new ReactSimpleSurvey object. The string passed in parameter will be the label displayed at the top of the survey. Then, we have to create our SurveyScreens, which will be a full screen content displayed to the user. Our SurveyScreen created, let's add fields to it ! On the first parameter of the addField method, we are defining the HTML node that will be displayed (Warning: at the moment only input and textarea are supported). In the second parameter, we'll define how to explain the user the input is for. And the third parameter is dedicated to the validation. Check to Assert class to see which methods are available.

You can call addScreen method as many times you want to fulfill your needs.

How to invoke a survey

As shown in App.js, we can display the ReactSimpleSurvey data through the Survey component as below:

<Survey
  survey={survey}
  dirAxis="x"
  onSubmit={(surveyCompleted) => handleSurveySubmit(surveyCompleted)}
  onCloseRequest={() => setShowSurvey(false)}
/>

Check App.js@handleSurveySubmit to check how to get only the answers instead of the whole survey enriched with the user answers. Note that the props in the exemple above are all the props available on the Survey component.