README
Survey Creator V2 for React (Beta)
Survey Creator V2 for React is a visual survey designer / form builder for the React version of SurveyJS.
NOTE: This package contains Survey Creator V2. If you are looking for information on V1, refer to the survey-creator directory. Differences between these two versions are described in the following help topic: SurveyJS Creator V2: What's new. For information on how to migrate to V2, refer to the Migration Guide for SurveyJS Creator - from V1 to V2 article.
Install
npm install survey-creator-react --save
Add Survey Creator V2 to Your Project
Create a new component and use it in your React application:
import { Component, Fragment } from "react";
import { SurveyCreatorComponent, SurveyCreator } from "survey-creator-react";
// Import CSS files for SurveyJS (survey-core) and Survey Creator
import "survey-core/defaultV2.min.css";
import "survey-creator-react/survey-creator-react.min.css";
export class SurveyCreatorWidget extends Component {
constructor() {
super();
// Instantiate Survey Creator
this.creator = new SurveyCreator({ showLogicTab: true });
// Enable auto save
this.creator.isAutoSave = true;
// Show notifications before and after a survey definition JSON is saved
this.creator.showState = true;
// Save the survey definition JSON to your web service
this.creator.saveSurveyFunc = (saveNo, callback) => {
// Call a function on your web service to store the survey definition JSON
// As an alternative to this.creator.JSON, you can use the this.creator.text string property
// saveSurveyJSON(this.id, this.creator.JSON, () => {
// callback(saveNo, true);
// });
};
}
componentDidMount() {
// Load a survey definition JSON from you web service
// ...
// Assign the survey definition to Survey Creator
// this.creator.JSON = yourJSON;
}
render() {
return (
<Fragment>
<SurveyCreatorComponent creator={this.creator} />
</Fragment>
);
}
}
License
The Survey Creator (Form Builder) is not available for free commercial usage. You can find more information about licensing this product on the following page: Licenses.