Cart Buy Licenses Contact Integrate into App Docs Support Login/Register
v 1.9.0
v 1.9.0
Overview Survey Creator Survey Creator V2 Examples Docs Source

Override select with React Select

This example demonstrates how to override select with React Select in SurveyJS Creator


                        

class CustomSelect extends SurveyReact.SurveyQuestionDropdown {
    constructor(props) {
        super(props);
    }
    get options() {
      return this.question.visibleChoices.map((c) => {
         return {value: c.value, label: c.value }
      });
    }
    get selectedOption() {
      return this.options.filter((o) => o.value == this.question.value);
    }
    onSelectChange = (selectedOption) => {
      this.setValueCore(selectedOption.value);
      console.log(window.survey.data);
    }
    renderElement() {
        if (this.isDisplayMode) {
        return (
<div id={this.question.inputId} className={this.question.getControlClass()} disabled>
    {(this.question.displayValue || this.question.optionsCaption)}
</div>);
        };

        return (
<Select id={this.question.inputId}
        value={this.selectedOption}
        onChange={this.onSelectChange}
        options={this.options}
        required={this.question.isRequired}
        menuPortalTarget={document.querySelector('body')} />
        );
    }
}

SurveyReact.ReactQuestionFactory.Instance.registerQuestion(
  "sv-dropdown-react",
  (props) => {
    return React.createElement(CustomSelect, props);
  }
);

Survey.RendererFactory.Instance.registerRenderer(
  "dropdown",
  "dropdown-react",
  "sv-dropdown-react"
);

Survey.Serializer.findProperty("dropdown", "renderAs").defaultValue = "dropdown-react";
            
                let options = {
                // showTestSurveyTab: false,
                // showJSONEditorTab: false
                showLogicTab: true,
                //showTranslationTab: true,
                //showEmbeddedSurveyTab: true,
                };
                var creator = new SurveyCreator.SurveyCreator(options);
            
                
                    ReactDOM.render(
                    <React.StrictMode>
                        <SurveyCreator.SurveyCreatorComponent creator={creator} />
                    </React.StrictMode>,
                    document.getElementById("creatorElement")
                    );
                
creator.JSON = {
    "questions": [
        {
            "type": "dropdown",
            "name": "car",
            "title": "What car are you driving?",
            "hasNone": true,
            "choices": [
                "Ford",
                "Vauxhall",
                "Volkswagen",
                "Nissan",
                "Audi",
                "Mercedes-Benz",
                "BMW",
                "Peugeot",
                "Toyota",
                "Citroen"
            ]
        }
    ]
};
                    
<!DOCTYPE html>
<html lang="en">
<head>
    <title>This example demonstrates how to override select with React Select in SurveyJS Creator, Survey Creator Example</title>

<meta name="viewport" content="width=device-width" />
        <script src="https://unpkg.com/react@17.0.1/umd/react.production.min.js"></script>
        <script src="https://unpkg.com/react-dom@17.0.1/umd/react-dom.production.min.js"></script>
        <script src="https://unpkg.com/@babel/standalone@7.2.5/babel.min.js"></script>
    <script src="/DevBuilds/survey-core/survey.core.min.js"></script>
    <script src="/DevBuilds/survey-react-ui/survey-react-ui.min.js"></script>
    <link href="/DevBuilds/survey-core/defaultV2.min.css" type="text/css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.10/ace.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.10/ext-language_tools.js" type="text/javascript" charset="utf-8"></script>
    <!-- Uncomment to enable Select2
    <script src="https://unpkg.com/jquery"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
    -->
        <script src="/DevBuilds/survey-creator-react/survey-creator-react.min.js"></script>
        <link href="/DevBuilds/survey-creator-react/survey-creator-react.min.css" type="text/css" rel="stylesheet" />
    <link rel="stylesheet" href="./index.css">
<script src="https://cdn.jsdelivr.net/npm/emotion@9.2.12/dist/emotion.umd.min.js"></script>
<script src="https://unpkg.com/prop-types@15.5.10/prop-types.min.js"></script>
<script src="https://unpkg.com/react-input-autosize@2.2.1/dist/react-input-autosize.min.js"></script>
<script src="https://unpkg.com/react-select@2.4.4/dist/react-select.min.js"></script>

</head>
<body>
    
<div id="surveyContainer">
        <div id="creatorElement" style="height: 100vh;"></div>
</div>

<script type="text/babel" src="./index.js"></script>

</body>
</html>