{"id":16689,"library":"survey-react-ui","title":"SurveyJS React UI","description":"survey-react-ui is a free, MIT-licensed React UI component library designed to render dynamic, interactive JSON-based forms and surveys directly within React applications. It enables developers to easily design and deploy complex, data-driven forms, polls, and quizzes, collecting user responses. The package is currently at version 2.5.20 and follows a rapid release cadence, with frequent minor and patch updates as indicated by the successive 2.5.x versions. Key differentiators include a rich set of over 20 built-in question types, support for custom question types, integrated themes with extensive CSS customization options, robust answer validation, and comprehensive TypeScript support. It is built upon `survey-core` for its underlying survey model logic and is broadly compatible with React versions 16.5, 17, 18, and 19. The library is backend-agnostic, with provided examples for Node.js, PHP, and ASP.NET environments.","status":"active","version":"2.5.20","language":"javascript","source_language":"en","source_url":"https://github.com/surveyjs/surveyjs","tags":["javascript","react","survey","form","surveyjs","survey-library","react-component","form-rendering","survey-renderer","typescript"],"install":[{"cmd":"npm install survey-react-ui","lang":"bash","label":"npm"},{"cmd":"yarn add survey-react-ui","lang":"bash","label":"yarn"},{"cmd":"pnpm add survey-react-ui","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required for the underlying survey model, data handling, and core logic, separate from the React UI rendering.","package":"survey-core","optional":false},{"reason":"Peer dependency for rendering the UI component within a React application.","package":"react","optional":false},{"reason":"Peer dependency for rendering React components to the DOM.","package":"react-dom","optional":false}],"imports":[{"note":"This is the primary React component for rendering a survey. Prefer named import for ESM.","wrong":"const Survey = require('survey-react-ui').Survey;","symbol":"Survey","correct":"import { Survey } from 'survey-react-ui';"},{"note":"The core survey model class is part of `survey-core`, not `survey-react-ui`. Importing from the wrong package is a common mistake.","wrong":"import { Model } from 'survey-react-ui';","symbol":"Model","correct":"import { Model } from 'survey-core';"},{"note":"Styling and theme management utility; like Model, it resides in `survey-core`. Users often confuse this with `survey-react-ui`.","wrong":"import { StylesManager } from 'survey-react-ui';","symbol":"StylesManager","correct":"import { StylesManager } from 'survey-core';"}],"quickstart":{"code":"import React, { useState, useEffect } from 'react';\nimport { Survey } from 'survey-react-ui';\nimport { Model } from 'survey-core';\nimport 'survey-core/defaultV2.min.css'; // Or 'survey-core/modern.min.css'\n\nconst surveyJson = {\n  title: 'Sample Survey',\n  description: 'Please answer the following questions.',\n  pages: [\n    {\n      name: 'page1',\n      elements: [\n        {\n          type: 'text',\n          name: 'name',\n          title: 'What is your name?',\n          isRequired: true\n        },\n        {\n          type: 'dropdown',\n          name: 'country',\n          title: 'Which country do you live in?',\n          choices: ['USA', 'Canada', 'Mexico', 'Germany', 'France'],\n          isRequired: true\n        }\n      ]\n    },\n    {\n      name: 'page2',\n      elements: [\n        {\n          type: 'comment',\n          name: 'feedback',\n          title: 'Any additional feedback?'\n        }\n      ]\n    }\n  ]\n};\n\nexport default function MySurveyComponent() {\n  const [surveyModel, setSurveyModel] = useState(null);\n  const [surveyResults, setSurveyResults] = useState(null);\n\n  useEffect(() => {\n    const model = new Model(surveyJson);\n    model.onComplete.add((sender, options) => {\n      console.log('Survey results:', sender.data);\n      setSurveyResults(sender.data);\n      // In a real app, you would send sender.data to your backend\n    });\n    setSurveyModel(model);\n  }, []);\n\n  if (!surveyModel) {\n    return <div>Loading survey...</div>;\n  }\n\n  return (\n    <div>\n      {surveyResults ? (\n        <div>\n          <h2>Thank you for completing the survey!</h2>\n          <pre>{JSON.stringify(surveyResults, null, 2)}</pre>\n        </div>\n      ) : (\n        <Survey model={surveyModel} />\n      )}\n    </div>\n  );\n}","lang":"typescript","description":"This quickstart demonstrates how to initialize a SurveyJS `Model` from a JSON definition and render it using the `Survey` React component. It includes basic state management for displaying results after completion and highlights the necessary CSS import for styling."},"warnings":[{"fix":"Consult the official SurveyJS migration guides (e.g., 'Migrate from v1 to v2') for detailed instructions on updating your JSON, component usage, and custom logic.","message":"Upgrading from SurveyJS v1 (packages like `survey-react`) to v2 (`survey-react-ui`, `survey-core`) involves significant breaking changes to the JSON schema, API, and styling system. A direct upgrade without code modifications will lead to errors.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Always import core classes like `Model` and `StylesManager` from `survey-core`. For example: `import { Model } from 'survey-core';`.","message":"The `survey-react-ui` package is strictly for the React UI component. The core survey logic and model (`Model` class, `StylesManager`, etc.) reside in the `survey-core` package. Accidentally importing `Model` or `StylesManager` from `survey-react-ui` will result in runtime errors or incorrect behavior.","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"Ensure you import a SurveyJS theme stylesheet in your application, typically in your main component or entry file. For example: `import 'survey-core/defaultV2.min.css';` or `import 'survey-core/modern.min.css';`.","message":"The SurveyJS UI components require a CSS theme to be imported for proper rendering and styling. Without importing a theme, the survey will appear unstyled, often with misaligned elements.","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"Verify that your project's `react` and `react-dom` versions satisfy the peer dependency requirements of `survey-react-ui`. Update your React versions if necessary, or consider using a compatible version of `survey-react-ui`.","message":"The `survey-react-ui` package declares `react` and `react-dom` as peer dependencies. Incompatible versions of React in your project (outside the supported ranges like `^16.5.0 || ^17.0.1 || ^18.1.0 || ^19.0.0`) can lead to build failures or unexpected runtime issues.","severity":"gotcha","affected_versions":">=2.0.0"}],"env_vars":null,"last_verified":"2026-04-22T00:00:00.000Z","next_check":"2026-07-21T00:00:00.000Z","problems":[{"fix":"Ensure you pass the `Survey.Model` instance to the `model` prop of the `<Survey />` component: `<Survey model={mySurveyModel} />`. Do not try to render `{mySurveyModel}` directly.","cause":"Attempting to render an instance of `Survey.Model` directly within JSX instead of passing it as a prop to the `Survey` React component.","error":"TypeError: Objects are not valid as a React child (found: object with keys {text, value, isNew, locText, locValue, question, getBaseValue, isSelected, itemValue, selected, isDisabled, onPropertyChanged, getType, locManager, getType...})"},{"fix":"Use the correct ES Module named import: `import { Survey } from 'survey-react-ui';`. If using CommonJS, ensure your bundler handles it correctly, or use `const { Survey } = require('survey-react-ui');` (though ESM is recommended).","cause":"This usually indicates that the `Survey` component was not imported correctly, often due to mixing CommonJS `require()` with ES Modules `import`, or an incorrect path.","error":"Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports."},{"fix":"Verify the exact path and filename for the desired SurveyJS theme. For v2, common paths are `survey-core/defaultV2.min.css` or `survey-core/modern.min.css`. Update your import statement accordingly.","cause":"Incorrect or outdated path for the SurveyJS CSS theme import. Theme paths and names might change between major versions or be misspelled.","error":"Module not found: Error: Can't resolve 'survey-react-ui/styles/default.css'"}],"ecosystem":"npm"}