Fullstory Forms React Library

This project is a fork of survey.js customized for compatibility with our internal tools and the form-core library.

Purpose

This form solution seemlessly integrates with the Fullstory by creating auto generated api defined elements on the form, fields, and buttons.

How it differs from SurveyJS survey-react-ui package.

Updates to the survey class, individual question classes, and action classes have been created in order to maintain and update element data properties.

React Survey

In reactSurvey.tsx

• getDataElementname: called in doRender. It makes the survey into a watched element
• getSurveyName: returns the survey name from the Model. Called on initialization.

React Elements

Select questions are appended with elementData sourced from the form-core library. These are the classes where that property can be found.

• SurveyQuestionBoolean
• SurveyQuestionDropdownBase (in renderSelect and renderInput)
• SurveyQuestionImagePicker
• SurveyQuestionImagePickerItem (updates within class)
• SurveyPage
• SurveyPanel
• SurveyQuestionCheckboxItem
• SurveyQuestionCheckbox (updates within class)
• TextAreaComponent
• SurveyQuestionFile
• SurveyQuestionMatrixCell (updates and inits within class)
• SurveyQuestionMatrixRow (updates and inits within class)
• SurveyQuestionMatrixTable
• SurveyQuestionMultipleText (updates within class)
• SurveyQuestionPanelDynamic
• SurveyQuestionRadiogroup
• SurveyQuestionRadioItem (updates and inits within class)
• SurveyQuestionRanking (updates and inits within class)
• SurveyQuestionRating
• SurveyQuestionTagbox
• SurveyQuestionText
• SurveyQuestionAndErrorsCell (inits within class)
• SurveyQuestionSignaturePad

Data Property Model

Specific data properties are added to each question, page, panel, and button. The properties will differ depending on the element but every element will get at least these two data properties used for identification. Where the name of the element is mapped to the name property on the question model.

data-fs-element=<ELEMENT_TYPE>
data-fs-element-name=<ELEMENT_NAME>

Implementation

Due to Fullstory's privacy-first approach, we need to access the blocklist from the client. This async functionality causes a slight difference in how we instantiate the forms.

Before

var model = new Survey.Model(json);

window.survey = model;

ReactDOM.render(
  <SurveyReact.Survey model={model} />,
  document.getElementById("surveyElement")
);

After

var model = new Survey.Model(json);

model.createBlockList().then(() => {
  window.survey = model;

  model.onComplete.add((sender, options) => {
    console.log(JSON.stringify(sender.data, null, 3));
  });

  ReactDOM.render(<SurveyReact.Survey model={model} />, document.getElementById("surveyElement"));
});

Maintenance

The current forked verson of the React SurveyJS is 2.2.6, we will be updating with every major version release.

SurveyJS React Form Library

A free and open-source MIT-licensed JavaScript form builder library that allows you to design dynamic, data-driven, multi-language survey forms and run them in your React applications.

Features

• Dynamic forms, surveys, polls, and quizzes for your JavaScript application
• Integration with React, Angular, Vue, jQuery, and Knockout
• 20+ built-in question types and support for custom question types
• Built-in themes and CSS customization
• Answer validation
• TypeScript support
• Community-supported UI localization to 50+ languages
• Integration with any backend framework (examples for PHP, NodeJS, and ASP.NET included)
• Compatibility with any server + database combination
• Third-party component integration

Get Started

To get started with SurveyJS React Form Library, refer to the following tutorial: Add a Survey to a React Application.

Resources

• Website
• Documentation
• Live Examples
• What's New

Build SurveyJS React Form Library from Sources

1. Build the platform-independent part

2. Install SurveyJS React Form Library dependencies and build this library

   cd ../form-react
   npm i
   npm run build

   You can find the built scripts in folders under the build directory.

3. Run a test application

   npm run start

   This command runs a local HTTP server at http://localhost:7777/.

4. Run unit tests

   npm run test

   The unit tests use Karma.

Licensing

SurveyJS Form Library is distributed under the MIT license.