Question T22457
Visible to All Users

Custom React Components with SurveyJS Functionality

created 9 days ago

Hi,
Instead of displaying SurveyJS fields, we need to use our custom-built components such as input fields, dropdowns, and radio buttons. However, we want to retain all existing SurveyJS functionalities, including show/hide logic, validation rules, required fields, and patterns.
Is it possible to integrate our custom React components while ensuring that SurveyJS validation, error handling, and question visibility remain fully functional?
Note:We use both Survey Creator and Survey Form.
Looking forward to your insights!

Answers approved by surveyjs Support

created 9 days ago

Hello Lakshit,
If you wish to retain existing functionalities of SurveyJS Form Library questions, however, you need to override rendering for certain question types and render custom React components, you may want to implement custom renderers for required questions. Please refer to the following demo: Custom Question Renderer.

With this option, you would use existing question models, however, those questions will be rendered using your custom React components.

Let me know if you have any further questions.

    Comments (2)

      Will all the input validations such as masking/pattern and other features work?

        Hi,
        Validation and mask settings are implemented at the level of a question's model. If you implement a custom question renderer for an existing Text question type, validation and mask settings will be available since you would use an existing question model. For the record: the source code of the default Text question React renderer is available here: SurveyQuestionText.

        I hope this information helps. Should you have any further questions, please let us know.