Custom Question Renderer

Each SurveyJS question type comes with a predefined renderer—a component that specifies the question's markup. If you want to customize a question's appearance, you can create a custom renderer and use it instead of the predefined renderer. Follow the instructions below to implement this functionality in your survey:

1. Create a component that renders your custom markup.
   If the component reuses a predefined renderer, its class should extend one of the predefined classes. For example, in this demo, a custom component adds an image to a predefined Radiogroup question. The component's class extends Radiogroup's class (see the RadiogroupWithImageQuestion class).

2. Register your component under a custom name in the component collection.
   In React, register the component in ReactElementFactory as shown in the SurveyComponent.jsx file.
   In Angular, register the component in AngularComponentFactory as shown in the custom-radiogroup.component.ts file.
   In Knockout, use techniques native to this library: Component Registration in Knockout.

3. Register your component as a renderer for a selected question type.
   Use the RendererFactory.Instance.registerRenderer(questionType, renderAs, rendererName) method that accepts the following parameters:

   • questionType: String - A question type for which this renderer can be used.
   • renderAs: String - A name that activates this renderer. This name should be assigned to the renderAs property in JSON.
   • rendererName: String - The custom renderer's name under which you registered it in step 2.

4. Specify the renderAs property in the survey JSON schema.
   Set this property to the renderAs name under which you register the custom renderer in step 3. Specify the renderAs property only for those questions that should use the custom renderer.