React + SurveyJS QuickStart Boilerplate
Clone or download
Latest commit 0fbb0b6 Oct 25, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
public updated with latest "create-react-app" Jun 14, 2018
src Got rid of image picker CW Jul 13, 2018
.gitignore updated with latest "create-react-app" Jun 14, 2018
README.md Update README.md Oct 25, 2018
package.json Updated SurveyJS libraries to the latest version Aug 28, 2018

README.md

SurveyJS React quickstart boilerplate

This project was bootstrapped with Create React App.

How to run this sample application

You can find the detailed information on how to perform common tasks in this guide.

Add survey component on your page

//In your react App.js or yourComponent.js file add these lines to import
import * as Survey from "survey-react";
import "survey-react/survey.css";

class App extends Component {
 //Define Survey JSON
 //Here is the simplest Survey with one text question
 json = {
  elements: [
   { type: "text", name: "customerName", title: "What is your name?", isRequired: true}
  ]
 };

 //Define a callback methods on survey complete
 onComplete(survey, options) {
  //Write survey results into database
  console.log("Survey results: " + JSON.stringify(survey.data));
 }
 render() {
  //Create the model and pass it into react Survey component
  //You may create survey model outside the render function and use it in your App or component
  //The most model properties are reactive, on their change the component will change UI when needed.
  var model = new Survey.Model(this.json);
  return (<Survey.Survey model={model} onComplete={this.onComplete}/>);
  /*
  //The alternative way. react Survey component will create survey model internally
  return (<Survey.Survey json={this.json} onComplete={this.onComplete}/>);
  */
  //You may pass model properties directly into component or set it into model
  // <Survey.Survey model={model} mode="display"/>
  //or 
  // model.mode="display"
  // <Survey.Survey model={model}/>
  // You may change model properties outside render function. 
  //If needed react Survey Component will change its behavior and change UI.
 }
}