survey-react-ui 3.0.0 → 3.0.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 +170 -43
- package/fesm/survey-react-ui.mjs +2 -2
- package/package.json +17 -8
- package/survey-react-ui.js +2 -2
- package/survey-react-ui.min.js +2 -2
package/README.md
CHANGED
|
@@ -1,74 +1,201 @@
|
|
|
1
|
+
<div align="center">
|
|
2
|
+
|
|
3
|
+
<img width="1200" height="600" alt="readme_overview_library" src="https://github.com/user-attachments/assets/1380d69c-9005-400e-aefd-ef6842d72744" />
|
|
4
|
+
|
|
1
5
|
# SurveyJS React Form Library
|
|
2
6
|
|
|
7
|
+
[](https://dev.azure.com/SurveyJS/V2%20Libraries/_build/latest?definitionId=130&repoName=surveyjs%2Fsurvey-library&branchName=master)
|
|
8
|
+
[](https://github.com/surveyjs/survey-library/blob/master/LICENSE)
|
|
9
|
+
[](https://playwright.dev)
|
|
10
|
+
[](https://github.com/surveyjs/survey-library/issues)
|
|
11
|
+
[](https://github.com/surveyjs/survey-library/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aclosed+)
|
|
12
|
+
|
|
13
|
+
</div>
|
|
14
|
+
<div align="justify">
|
|
3
15
|
|
|
4
|
-
|
|
16
|
+
SurveyJS React Form Library is a free and open-source React component library for rendering dynamic, JSON-driven forms and surveys in React applications.
|
|
5
17
|
|
|
18
|
+
The `survey-react-ui` package integrates SurveyJS Form Library with React, renders forms defined with SurveyJS JSON form definitions, and collects user responses in the browser. It works together with the framework-independent [`survey-core`](https://github.com/surveyjs/survey-library/tree/master/packages/survey-core) package, which provides the form model and handles form structure, validation, conditional logic, calculations, navigation, localization, and other core behavior. Installing `survey-react-ui` brings `survey-core` with it — you build a model from JSON with `survey-core` and pass it to this package's `Survey` component (`<Survey model={survey} />`) to render it.
|
|
6
19
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
20
|
+
Use SurveyJS React Form Library to build multi-step forms, surveys, quizzes, assessments, calculator forms, and other data-entry tools. Form definitions and submitted responses can be stored and processed in your own backend and database.
|
|
21
|
+
|
|
22
|
+
You can create form definitions manually, generate them with AI, or build them visually with [SurveyJS Creator](https://surveyjs.io/survey-creator/documentation/overview), an embeddable drag-and-drop form builder.
|
|
23
|
+
|
|
24
|
+
## Installation
|
|
25
|
+
|
|
26
|
+
```sh
|
|
27
|
+
npm install survey-react-ui
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
## Usage
|
|
31
|
+
|
|
32
|
+
```jsx
|
|
33
|
+
import { Model } from "survey-core";
|
|
34
|
+
import { Survey } from "survey-react-ui";
|
|
35
|
+
import "survey-core/survey-core.css";
|
|
36
|
+
|
|
37
|
+
const surveyJson = {
|
|
38
|
+
elements: [
|
|
39
|
+
{ name: "firstName", title: "Enter your first name:", type: "text" },
|
|
40
|
+
{ name: "satisfaction", title: "How satisfied are you?", type: "rating" }
|
|
41
|
+
]
|
|
42
|
+
};
|
|
43
|
+
|
|
44
|
+
export default function SurveyComponent() {
|
|
45
|
+
const survey = new Model(surveyJson);
|
|
46
|
+
survey.onComplete.add((sender) => {
|
|
47
|
+
console.log(JSON.stringify(sender.data, null, 2));
|
|
48
|
+
});
|
|
49
|
+
|
|
50
|
+
return <Survey model={survey} />;
|
|
51
|
+
}
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
`survey-core/survey-core.css` applies the Default theme. For other predefined themes and CSS-variable customization, refer to [Themes & Styles](https://surveyjs.io/form-library/documentation/manage-default-themes-and-styles).
|
|
55
|
+
|
|
56
|
+
## Server-Side Rendering
|
|
57
|
+
|
|
58
|
+
SurveyJS supports SSR: `survey-core` does not access the DOM during rendering, and HTML `id` attributes are generated deterministically per survey instance, so server and client markup match and hydration succeeds. If you render multiple surveys on the same page, assign a unique [`elementIdPrefix`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#elementIdPrefix) to each model.
|
|
59
|
+
|
|
60
|
+
Under [Next.js](https://nextjs.org) or another framework with React Server Components, mark the component that renders a survey as client code with the ['use client'](https://react.dev/reference/react/use-client) directive — SurveyJS components are interactive and rely on state and event handlers. See [Add a Survey to a React Application](https://surveyjs.io/form-library/documentation/get-started-react).
|
|
61
|
+
|
|
62
|
+
## Theme Adapters
|
|
63
|
+
|
|
64
|
+
A theme adapter maps an existing design system's CSS variables onto SurveyJS design tokens, so an embedded survey inherits the look of the host application. Adapters ship with `survey-core` as plain CSS — import one after the base style sheet:
|
|
65
|
+
|
|
66
|
+
```js
|
|
67
|
+
import "survey-core/survey-core.css";
|
|
68
|
+
import "survey-core/themes/adapters/shadcn-default.css";
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
Adapters are available for [Bootstrap](https://getbootstrap.com) (plus Bootswatch variants), [Material UI](https://mui.com), and [shadcn/ui](https://ui.shadcn.com), with matching icon sets (`survey-core/themes/adapters/icons/lucide`, `.../icons/mui`). See [Theme Adapters](https://surveyjs.io/themes/theme-adapters).
|
|
72
|
+
|
|
73
|
+
## Key Features
|
|
74
|
+
|
|
75
|
+
### Dynamic Forms and Surveys
|
|
76
|
+
|
|
77
|
+
- Render dynamic JSON-driven forms and surveys in React applications
|
|
78
|
+
- Multi-step forms, quizzes, assessments, calculator forms, and survey pop-ups
|
|
79
|
+
- Conditional visibility, branching, calculations, and expression-based logic
|
|
80
|
+
- Input validation, [save-and-resume workflows](https://surveyjs.io/form-library/examples/save-and-restore-user-responses-to-complete-survey/reactjs), and dynamic content
|
|
81
|
+
|
|
82
|
+
### Form Controls
|
|
83
|
+
|
|
84
|
+
- 20+ built-in question and input types
|
|
85
|
+
- Dynamic panels and repeating question groups
|
|
86
|
+
- [Custom question types](https://surveyjs.io/form-library/documentation/customize-question-types/question-customization-options) and reusable components
|
|
87
|
+
- Electronic signature, image capture, file upload, matrices, and other advanced controls
|
|
88
|
+
|
|
89
|
+
### React Integration
|
|
90
|
+
|
|
91
|
+
- React components
|
|
26
92
|
- TypeScript support
|
|
27
|
-
-
|
|
28
|
-
-
|
|
29
|
-
-
|
|
30
|
-
- Third-party component integration
|
|
93
|
+
- Framework-independent form model through `survey-core`
|
|
94
|
+
- Client-side rendering without a required SurveyJS backend
|
|
95
|
+
- Support for SSR
|
|
31
96
|
|
|
32
|
-
|
|
97
|
+
### Data and Backend Integration
|
|
33
98
|
|
|
34
|
-
|
|
99
|
+
- [Connect to any server, API, or database](https://surveyjs.io/documentation/backend-integration)
|
|
100
|
+
- Store form definitions and submitted responses in your own infrastructure
|
|
101
|
+
- [Load choices from web services](https://surveyjs.io/form-library/examples/dropdown-menu-load-data-from-restful-service/reactjs)
|
|
102
|
+
- Integrate third-party components and services
|
|
103
|
+
- [Backend integration examples for PHP, ASP.NET Core, and Node.js](https://surveyjs.io/backend-integration/examples)
|
|
35
104
|
|
|
36
|
-
|
|
105
|
+
### Appearance and Localization
|
|
106
|
+
|
|
107
|
+
- Built-in themes and custom branding
|
|
108
|
+
- [Theme Adapters for Bootstrap, Material UI, and shadcn/ui](https://surveyjs.io/themes/theme-adapters)
|
|
109
|
+
- Multi-language forms and right-to-left language support
|
|
110
|
+
- Community-supported UI localization
|
|
111
|
+
|
|
112
|
+
## Related packages
|
|
113
|
+
|
|
114
|
+
| Package | Purpose |
|
|
115
|
+
| --- | --- |
|
|
116
|
+
| [`survey-core`](https://www.npmjs.com/package/survey-core) | Platform-independent survey model (installed automatically) |
|
|
117
|
+
| [`survey-angular-ui`](https://www.npmjs.com/package/survey-angular-ui) | Angular renderer |
|
|
118
|
+
| [`survey-vue3-ui`](https://www.npmjs.com/package/survey-vue3-ui) | Vue 3 renderer |
|
|
119
|
+
| [`survey-js-ui`](https://www.npmjs.com/package/survey-js-ui) | HTML/CSS/JavaScript renderer |
|
|
120
|
+
|
|
121
|
+
## Documentation
|
|
37
122
|
|
|
38
123
|
- [Website](https://surveyjs.io/)
|
|
39
|
-
- [Documentation](https://surveyjs.io/
|
|
40
|
-
- [
|
|
41
|
-
- [
|
|
124
|
+
- [Documentation](https://surveyjs.io/form-library/documentation/overview)
|
|
125
|
+
- [Get Started with React](https://surveyjs.io/form-library/documentation/get-started-react)
|
|
126
|
+
- [Form Library Demos for React](https://surveyjs.io/form-library/examples/nps-question/reactjs)
|
|
127
|
+
- [Release Notes](https://surveyjs.io/stay-updated/release-notes)
|
|
128
|
+
- [Roadmap](https://surveyjs.io/stay-updated/roadmap)
|
|
129
|
+
- [What's New](https://surveyjs.io/stay-updated/major-updates/2025-2026)
|
|
130
|
+
|
|
131
|
+
For AI coding agents: [https://surveyjs.io/llms.txt](https://surveyjs.io/llms.txt) indexes the documentation. Any documentation page is also available as raw Markdown — append `.md` to its URL, for example [https://surveyjs.io/form-library/documentation/get-started-react.md](https://surveyjs.io/form-library/documentation/get-started-react.md).
|
|
132
|
+
|
|
133
|
+
## SurveyJS Ecosystem
|
|
42
134
|
|
|
43
|
-
|
|
135
|
+
| Product | Purpose | License |
|
|
136
|
+
| --- | --- | --- |
|
|
137
|
+
| [Form Library](https://surveyjs.io/form-library) | Render dynamic forms from JSON (this package) | MIT |
|
|
138
|
+
| [Survey Creator](https://surveyjs.io/survey-creator) | Drag-and-drop form builder UI | Commercial |
|
|
139
|
+
| [Dashboard](https://surveyjs.io/dashboard) | Visualize and analyze collected results | Commercial |
|
|
140
|
+
| [PDF Generator](https://surveyjs.io/pdf-generator) | Render forms and responses as PDF | Commercial |
|
|
141
|
+
| [AI Form Response Extractor](https://surveyjs.io/documentation/combine-paper-and-online-survey-form-data) | Extract responses from paper forms, PDFs, and images into a SurveyJS schema (`ai-form-response-extractor`) | MIT |
|
|
44
142
|
|
|
45
|
-
|
|
143
|
+
## Build from Source
|
|
46
144
|
|
|
47
|
-
|
|
145
|
+
Requires Node.js 20 or later — CI builds on Node 20.x and 22.x. This monorepo does **not** use npm workspaces: each package installs independently, but a root install is still required for the shared tooling (linting, Playwright).
|
|
48
146
|
|
|
147
|
+
1. **Clone the repo and install shared dependencies**
|
|
148
|
+
|
|
149
|
+
```sh
|
|
150
|
+
git clone https://github.com/surveyjs/survey-library.git
|
|
151
|
+
cd survey-library
|
|
152
|
+
npm install
|
|
49
153
|
```
|
|
50
|
-
|
|
51
|
-
|
|
154
|
+
|
|
155
|
+
2. **Build `survey-core` first**
|
|
156
|
+
|
|
157
|
+
This package resolves `survey-core` from `../survey-core/build`, so the model must be built before this library can be built or tested. Follow [Build from sources](https://github.com/surveyjs/survey-library/blob/master/packages/survey-core/README.md#build-from-sources) in the `survey-core` README.
|
|
158
|
+
|
|
159
|
+
3. **Install dependencies and build this library**
|
|
160
|
+
|
|
161
|
+
```sh
|
|
162
|
+
cd packages/survey-react-ui
|
|
163
|
+
npm install
|
|
52
164
|
npm run build
|
|
53
165
|
```
|
|
54
166
|
|
|
55
|
-
|
|
167
|
+
Build output goes to the `build` directory. Use `npm run watch:dev` while developing.
|
|
56
168
|
|
|
57
|
-
|
|
169
|
+
4. **Run a test application**
|
|
58
170
|
|
|
59
|
-
```
|
|
171
|
+
```sh
|
|
60
172
|
npm run start
|
|
61
173
|
```
|
|
62
174
|
|
|
63
|
-
This
|
|
175
|
+
This serves the package directory at http://localhost:8080/.
|
|
64
176
|
|
|
65
|
-
|
|
177
|
+
5. **Run unit tests**
|
|
66
178
|
|
|
179
|
+
Unit tests use [Vitest](https://vitest.dev/) in a jsdom environment and live in `tests`. The markup snapshot tests are generated into `tests/shards` by `gen-shards.js` before each run, so `npm run test` is the entry point rather than a bare `vitest`.
|
|
180
|
+
|
|
181
|
+
```sh
|
|
182
|
+
npm run test # whole suite
|
|
183
|
+
npm run test:watch # watch mode
|
|
184
|
+
npx vitest run tests/ssr-postid.spec.ts # a single file
|
|
185
|
+
npx vitest run -t "test name" # tests matching a substring
|
|
186
|
+
npm run test:update # update markup snapshots
|
|
67
187
|
```
|
|
68
|
-
npm run test
|
|
69
|
-
```
|
|
70
188
|
|
|
71
|
-
|
|
189
|
+
6. **Run end-to-end tests**
|
|
190
|
+
|
|
191
|
+
E2E, visual-regression, and accessibility tests are Playwright suites. Do not start an HTTP server yourself — the Playwright config starts its own.
|
|
192
|
+
|
|
193
|
+
```sh
|
|
194
|
+
npm run e2e:ci # e2e
|
|
195
|
+
npm run e2e:ci -- --grep "TestName" # a single test
|
|
196
|
+
npm run scr:ci # visual regression
|
|
197
|
+
npm run accessibility-tests:ci # accessibility
|
|
198
|
+
```
|
|
72
199
|
|
|
73
200
|
## Licensing
|
|
74
201
|
|
package/fesm/survey-react-ui.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* surveyjs - Survey JavaScript library v3.0.
|
|
2
|
+
* surveyjs - Survey JavaScript library v3.0.1
|
|
3
3
|
* Copyright (c) 2015-2026 Devsoft Baltic OÜ - http://surveyjs.io/
|
|
4
4
|
* License: MIT (http://www.opensource.org/licenses/mit-license.php)
|
|
5
5
|
*/
|
|
@@ -6137,7 +6137,7 @@ ReactElementFactory.Instance.registerElement(LocalizableString.editableRenderer,
|
|
|
6137
6137
|
return React.createElement(SurveyLocStringEditor, props);
|
|
6138
6138
|
});
|
|
6139
6139
|
|
|
6140
|
-
checkLibraryVersion(`${"3.0.
|
|
6140
|
+
checkLibraryVersion(`${"3.0.1"}`, "survey-react-ui");
|
|
6141
6141
|
|
|
6142
6142
|
export { CharacterCounterComponent, ComponentsContainer, Header, HeaderCell, HeaderMobile, List, ListItemContent, ListItemGroup, LoadingIndicatorComponent, LogoImage, MatrixRow, NotifierComponent, Popup, PopupModal, PopupSurvey, QuestionErrorComponent, RatingDropdownItem, RatingItem, RatingItemSmiley, RatingItemStar, ReactElementFactory, ReactQuestionFactory, ReactSurveyElement, ReactSurveyElementsWrapper, Scroll, Skeleton, SliderLabelItem, Survey, SurveyActionBar, SurveyElementBase, SurveyElementErrors, SurveyFileChooseButton, SurveyFileItem, SurveyFilePreview, SurveyFlowPanel, SurveyHeader, SurveyLocStringEditor, SurveyLocStringViewer, SurveyNavigationBase, SurveyPage, SurveyPanel, SurveyProgress, SurveyProgressButtons, SurveyProgressToc, SurveyQuestion, SurveyQuestionAndErrorsCell, SurveyQuestionBoolean, SurveyQuestionBooleanCheckbox, SurveyQuestionBooleanRadio, SurveyQuestionBooleanSwitch, SurveyQuestionButtonGroup, SurveyQuestionButtonGroupDropdown, SurveyQuestionCheckbox, SurveyQuestionCheckboxItem, SurveyQuestionComment, SurveyQuestionCommentItem, SurveyQuestionComposite, SurveyQuestionCustom, SurveyQuestionDropdown, SurveyQuestionDropdownBase, SurveyQuestionDropdownSelect, SurveyQuestionElementBase, SurveyQuestionEmpty, SurveyQuestionExpression, SurveyQuestionFile, SurveyQuestionHtml, SurveyQuestionImage, SurveyQuestionImageMap, SurveyQuestionImagePicker, SurveyQuestionMatrix, SurveyQuestionMatrixCell, SurveyQuestionMatrixDropdown, SurveyQuestionMatrixDropdownBase, SurveyQuestionMatrixDropdownCell, SurveyQuestionMatrixDynamic, SurveyQuestionMatrixDynamicDragDropIcon, SurveyQuestionMatrixRow, SurveyQuestionMultipleText, SurveyQuestionOptionItem, SurveyQuestionPanelDynamic, SurveyQuestionPanelDynamicProgressText, SurveyQuestionRadioItem, SurveyQuestionRadiogroup, SurveyQuestionRanking, SurveyQuestionRankingItem, SurveyQuestionRankingItemContent, SurveyQuestionRating, SurveyQuestionRatingDropdown, SurveyQuestionSignaturePad, SurveyQuestionSlider, SurveyQuestionTagbox, SurveyQuestionTagboxItem, SurveyQuestionText, SurveyRow, SurveyTimerPanel, SurveyWindow, SvgBundleComponent, SvgIcon, TagboxFilterString, TitleActions, TitleElement, attachKey2click };
|
|
6143
6143
|
//# sourceMappingURL=survey-react-ui.mjs.map
|
package/package.json
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "survey-react-ui",
|
|
3
|
-
"version": "3.0.
|
|
3
|
+
"version": "3.0.1",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"author": "DevSoft Baltic OU <info@devsoftbaltic.com>",
|
|
6
6
|
"homepage": "https://surveyjs.io/",
|
|
7
|
-
"description": "
|
|
7
|
+
"description": "React form library for rendering dynamic, JSON-based forms and surveys. Collect user responses and store them in your own database.",
|
|
8
8
|
"keywords": [
|
|
9
9
|
"react",
|
|
10
10
|
"survey",
|
|
@@ -17,7 +17,6 @@
|
|
|
17
17
|
"dynamic-form",
|
|
18
18
|
"interactive-form",
|
|
19
19
|
"form-library",
|
|
20
|
-
"form-management",
|
|
21
20
|
"questionnaire",
|
|
22
21
|
"data-collection",
|
|
23
22
|
"data-validation",
|
|
@@ -27,11 +26,21 @@
|
|
|
27
26
|
"json",
|
|
28
27
|
"json-schema",
|
|
29
28
|
"react-schema-form",
|
|
30
|
-
"survey-renderer",
|
|
31
|
-
"client-side",
|
|
32
|
-
"frontend",
|
|
33
29
|
"javascript",
|
|
34
|
-
"typescript"
|
|
30
|
+
"typescript",
|
|
31
|
+
"schema-form",
|
|
32
|
+
"conditional-logic",
|
|
33
|
+
"quiz",
|
|
34
|
+
"poll",
|
|
35
|
+
"localization",
|
|
36
|
+
"css",
|
|
37
|
+
"shadcn",
|
|
38
|
+
"mui",
|
|
39
|
+
"material-ui",
|
|
40
|
+
"bootstrap",
|
|
41
|
+
"bootswatch",
|
|
42
|
+
"ssr",
|
|
43
|
+
"nextjs"
|
|
35
44
|
],
|
|
36
45
|
"files": [
|
|
37
46
|
"**/*"
|
|
@@ -51,7 +60,7 @@
|
|
|
51
60
|
}
|
|
52
61
|
},
|
|
53
62
|
"peerDependencies": {
|
|
54
|
-
"survey-core": "3.0.
|
|
63
|
+
"survey-core": "3.0.1",
|
|
55
64
|
"react": "^16.5.0 || ^17.0.1 || ^18.1.0 || ^19.0.0",
|
|
56
65
|
"react-dom": "^16.5.0 || ^17.0.1 || ^18.1.0 || ^19.0.0"
|
|
57
66
|
}
|
package/survey-react-ui.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* surveyjs - Survey JavaScript library v3.0.
|
|
2
|
+
* surveyjs - Survey JavaScript library v3.0.1
|
|
3
3
|
* Copyright (c) 2015-2026 Devsoft Baltic OÜ - http://surveyjs.io/
|
|
4
4
|
* License: MIT (http://www.opensource.org/licenses/mit-license.php)
|
|
5
5
|
*/
|
|
@@ -6157,7 +6157,7 @@
|
|
|
6157
6157
|
return React__namespace.createElement(SurveyLocStringEditor, props);
|
|
6158
6158
|
});
|
|
6159
6159
|
|
|
6160
|
-
surveyCore.checkLibraryVersion(`${"3.0.
|
|
6160
|
+
surveyCore.checkLibraryVersion(`${"3.0.1"}`, "survey-react-ui");
|
|
6161
6161
|
|
|
6162
6162
|
Object.defineProperty(exports, "Model", {
|
|
6163
6163
|
enumerable: true,
|