survey-creator-react 1.8.78-beta.1 → 1.9.2-beta.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +53 -70
- package/package.json +1 -1
- package/survey-creator-react.css +2892 -5581
- package/survey-creator-react.d.ts +54 -34
- package/survey-creator-react.js +2285 -1319
- package/survey-creator-react.min.css +2891 -5577
- package/survey-creator-react.min.js +63 -43
package/README.md
CHANGED
|
@@ -1,84 +1,67 @@
|
|
|
1
|
-
|
|
1
|
+
# Survey Creator V2 for React (Beta)
|
|
2
2
|
|
|
3
3
|
[](https://dev.azure.com/SurveyJS/SurveyJS%20Integration%20Tests/_build/latest?definitionId=8&branchName=master)
|
|
4
4
|
<a href="https://www.npmjs.com/package/survey-creator"><img alt="NPM Version" src="https://img.shields.io/npm/v/survey-creator.svg" data-canonical-src="https://img.shields.io/npm/v/survey-creator.svg" style="max-width:100%;"></a>
|
|
5
5
|
|
|
6
|
-
|
|
6
|
+
Survey Creator V2 for React is a visual survey designer / form builder for the React version of [SurveyJS](https://github.com/surveyjs/survey-library).
|
|
7
7
|
|
|
8
|
-
[
|
|
8
|
+
- [Live Examples](https://surveyjs.io/Examples/Survey-Creator?platform=ReactjsV2)
|
|
9
|
+
- [Documentation](https://surveyjs.io/Documentation/Survey-Creator)
|
|
10
|
+
- [Create your Survey or Form now](https://surveyjs.io/create-survey-v2)
|
|
9
11
|
|
|
12
|
+
**NOTE**: This package contains Survey Creator V2. If you are looking for information on V1, refer to the [survey-creator](./packages/survey-creator) directory. Differences between these two versions are described in the following help topic: [SurveyJS Creator V2: What's new](https://surveyjs.io/Documentation/Survey-Creator?id=Creator-V2-Whats-New). For information on how to migrate to V2, refer to the [Migration Guide for SurveyJS Creator - from V1 to V2](https://surveyjs.io/Documentation/Survey-Creator?id=Migrate-from-V1-to-V2) article.
|
|
10
13
|
|
|
11
|
-
##
|
|
12
|
-
|
|
13
|
-
Dowload the latest version as zip file [Download](https://github.com/surveyjs/survey-creator/releases)
|
|
14
|
-
|
|
15
|
-
Install the library using npm.
|
|
14
|
+
## Install
|
|
16
15
|
|
|
17
16
|
```
|
|
18
|
-
npm install survey-creator
|
|
17
|
+
npm install survey-creator-react -- save
|
|
19
18
|
```
|
|
20
19
|
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
```
|
|
66
|
-
npm run build_prod
|
|
67
|
-
```
|
|
68
|
-
|
|
69
|
-
After that you should have the library at 'build' directory.
|
|
70
|
-
|
|
71
|
-
4. **Run unit tests**
|
|
72
|
-
```
|
|
73
|
-
npm test
|
|
74
|
-
```
|
|
75
|
-
This command will run unit tests usign [Karma](https://karma-runner.github.io/0.13/index.html)
|
|
76
|
-
|
|
77
|
-
## Dependencies
|
|
78
|
-
|
|
79
|
-
The library depends on: [surveyjs](http://surveyjs.io/Library/) and [knockoutjs](http://knockoutjs.com)
|
|
80
|
-
Optionally you may use [bootstrap](http://getbootstrap.com), [ace editor](https://ace.c9.io/) and [select2](https://select2.org/)
|
|
20
|
+
## Add Survey Creator V2 to Your Project
|
|
21
|
+
|
|
22
|
+
Create a new component and use it in your React application:
|
|
23
|
+
|
|
24
|
+
```js
|
|
25
|
+
import { Component, Fragment } from "react";
|
|
26
|
+
import { SurveyCreatorComponent, SurveyCreator } from "survey-creator-react";
|
|
27
|
+
// Import CSS stylesheets for SurveyJS (survey-core) and Survey Creator
|
|
28
|
+
import "survey-core/defaultV2.min.css";
|
|
29
|
+
import "survey-creator-react/survey-creator-react.min.css";
|
|
30
|
+
|
|
31
|
+
export class SurveyCreatorWidget extends Component {
|
|
32
|
+
constructor() {
|
|
33
|
+
super();
|
|
34
|
+
// Instantiate Survey Creator
|
|
35
|
+
this.creator = new SurveyCreator({ showLogicTab: true });
|
|
36
|
+
// Enable auto save
|
|
37
|
+
this.creator.isAutoSave = true;
|
|
38
|
+
// Show notifications before and after a survey definition JSON is saved
|
|
39
|
+
this.creator.showState = true;
|
|
40
|
+
// Save the survey definition JSON to your web service
|
|
41
|
+
this.creator.saveSurveyFunc = (saveNo, callback) => {
|
|
42
|
+
// Call a function on your web service to store the survey definition JSON
|
|
43
|
+
// As an alternative to this.creator.JSON, you can use the this.creator.text string property
|
|
44
|
+
// saveSurveyJSON(this.id, this.creator.JSON, () => {
|
|
45
|
+
// callback(saveNo, true);
|
|
46
|
+
// });
|
|
47
|
+
};
|
|
48
|
+
}
|
|
49
|
+
componentDidMount() {
|
|
50
|
+
// Load a survey definition JSON from you web service
|
|
51
|
+
// ...
|
|
52
|
+
// Assign the survey definition to Survey Creator
|
|
53
|
+
// this.creator.JSON = yourJSON;
|
|
54
|
+
}
|
|
55
|
+
render() {
|
|
56
|
+
return (
|
|
57
|
+
<Fragment>
|
|
58
|
+
<SurveyCreatorComponent creator={this.creator} />
|
|
59
|
+
</Fragment>
|
|
60
|
+
);
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
```
|
|
81
64
|
|
|
82
65
|
## License
|
|
83
66
|
|
|
84
|
-
The Survey Creator (Form Builder) is
|
|
67
|
+
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](http://surveyjs.io/Licenses).
|