Question T15590
Visible to All Users
Duplicate

We have closed this ticket because another page addresses its subject:

Extending rating scale question

How to use survey-react-ui Components in Custom Widgets

created a year ago (modified a year ago)

Hey SurveyJS community,
I'm having trouble using survey-react-ui components, particularly the <SurveyQuestionText /> component, within a custom widget that extends SurveyQuestionBase. I've followed the documentation and examples, but unfortunately, it's not working as expected.

TypeScript
import React from 'react'; import { QuestionTextModel } from 'survey-core'; import { SurveyQuestionElementBase, SurveyQuestionText } from 'survey-react-ui'; class CustomWidget extends SurveyQuestionElementBase { constructor(props) { super(props); } render() { return ( <div> <div>Hello world</div> {/* This line is show on the screen */} {/* This is where I'm trying to use <SurveyQuestionText /> */} <SurveyQuestionText question={new QuestionTextModel('abc')} /> {/* Now this line should display correctly. But it didn't display */} </div> ); } } export default CustomWidget;

I've ensured that survey-core and survey-react-ui are properly installed. I would appreciate any guidance or examples on how to correctly use survey-react-ui components within my custom widget.
Thanks in advance for your help!

Answers approved by surveyjs Support

created a year ago

Hello Steve,
If you wish to extend a Text question, you can update your custom widget implementation as follows.

  • Implement a question model by extending QuestionTextModel.
JavaScript
import { QuestionTextModel } from "survey-core"; import { defaultV2Css } from "survey-core"; const CUSTOM_WIDGET_TYPE = "customtext"; // Inherit Text CSS classes defaultV2Css[CUSTOM_WIDGET_TYPE] = defaultV2Css["text"]; // Inherit Text icon settings.customIcons["icon-customtext"] = "icon-text"; // A model that extends the Question class and inherits all its properties and methods class CustomWidgetModel extends QuestionTextModel { getType() { return CUSTOM_WIDGET_TYPE; } } ElementFactory.Instance.registerElement(CUSTOM_WIDGET_TYPE, (name) => { return new CustomWidgetModel(name); }); Serializer.addClass( CUSTOM_WIDGET_TYPE, [], function () { return new CustomWidgetModel(""); }, "text" );
  • Implement the rendering model by extending SurveyQuestionText.
JavaScript
import { SurveyQuestionText } from "survey-react-ui"; class CustomWidget extends SurveyQuestionText { constructor(props) { super(props); } get question() { return this.questionBase; } renderElement() { const baseElement = super.renderElement(); // Rendering the base SurveyQuestionText return ( <div> <div>Hello world</div> {baseElement} {/* Render the base SurveyQuestionText component */} {/* Other custom elements or logic can go here */} </div> ); } } ReactQuestionFactory.Instance.registerQuestion(CUSTOM_WIDGET_TYPE, (props) => { return React.createElement(CustomWidget, props); });

View CodeSandbox

A custom question appears as follows:
Clipboard-File-1.png

You can also review the following demo: Implement a Descriptive Text Element. Even though it is created for a Survey Builder, the code can be reused to implement a custom question within a Form Library.

Should you have any further questions, please let me know.

Thanks

We hope you enjoyed the level of service you received. If so, we would love if you could leave your feedback on SurveyJS page at g2.com. As we’re building our business, every review helps build credibility for future customers and your feedback would be greatly appreciated.

    Comments (2)

      Thank you for the solution! Jane. It worked perfectly for integrating SurveyQuestionText into my custom widget.

      Now, I'm curious about extending this custom widget to include other survey question types such as <SurveyQuestionDropdown /> and <SurveyQuestionRadiogroup />. Could you provide some guidance on how I can implement these additional question types within the same custom widget? I aim to create a versatile component that supports various survey questions (It's more like Composite question).

      Thank you all for your help!

        Hello Steve,
        Thank you for the update. When you extend a React question, you literally create a new question type with its own properties like value, etc. I'm afraid that rendering multiple questions within a single question component may not be viable. Would you elaborate on your overall usage scenario? Have you considered creating a composite component?

        I look forward to your reply.