---
title: Override the Property Grid Component
product: Survey Creator
description: You can change the default behavior of Survey Creator UI and move some of the elements from the designer surface to the property grid. View a free demo for JavaScript.
framework: React
source: https://surveyjs.io/survey-creator/examples/override-property-grid/reactjs
index: https://surveyjs.io/survey-creator/examples/overview.md
---
# Override the Property Grid Component (React)
Survey Creator consists of individual UI components that you can override to extend their functionality or implement custom appearance. Overriding the Property Grid component is useful if you want to add UI elements around it, without customizing the Property Grid itself. For instance, this demo shows how to display custom buttons above the Property Grid.
The steps to override a SurveyJS component depend on the frontend framework you use. The following instructions outline the core stages:
1. Create a custom component.
This component will extend the Property Grid functionality.
1. Make the original Property Grid component available within the custom component.
In React, import `PropertyGridComponent` within the custom component.
In Vue 3, register the original component using the `app.component()` method (see the `main.ts` file).
In Angular and vanilla JS applications, the original component is available by default.
1. Implement desired functionality in the custom component.
The component's markup should include the original Property Grid component.
1. Replace the original component with the custom component.
Register the custom component under the name `"svc-property-grid"` within `ComponentFactory` (in Vue 3), `ReactElementFactory` (in React and vanilla JS), or `AngularComponentFactory` (in Angular).
Refer to the Code tab for details and code examples.
## Files
### `public/index.html`
```html
```
### `src/nps_survey.js`
```js
export const NpsSurvey = {
"completedHtmlOnCondition": [
{
"expression": "{nps-score} <= 6 or {rebuy} = false",
"html": "Thanks for your feedback! We highly value all ideas and suggestions from our customers, whether they're positive or critical. In the future, our team might reach out to you to learn more about how we can further improve our product so that it exceeds your expectations."
},
{
"expression": "{nps-score} = 6 or {nps-score} = 7",
"html": "Thanks for your feedback. Our goal is to create the best possible product, and your thoughts, ideas, and suggestions play a major role in helping us identify opportunities to improve."
},
{
"expression": "{nps-score} >= 8",
"html": "Thanks for your feedback. It's great to hear that you're a fan of our product. Your feedback helps us discover new opportunities to improve it and make sure you have the best possible experience."
}
],
"pages": [
{
"name": "page1",
"elements": [
{
"type": "rating",
"name": "nps-score",
"title": "On a scale from 0 to 10, how likely are you to recommend us to a friend or colleague?",
"rateMin": 0,
"rateMax": 10,
"minRateDescription": "Very unlikely",
"maxRateDescription": "Very likely",
"rateDescriptionLocation": "bottom"
},
{
"type": "comment",
"name": "disappointing-experience",
"visibleIf": "{nps-score} <= 5",
"title": "How did we disappoint you and what can we do to make things right?",
"maxLength": 300
},
{
"type": "comment",
"name": "improvements-required",
"visibleIf": "{nps-score} >= 6",
"title": "What can we do to make your experience more satisfying?",
"maxLength": 300
},
{
"type": "checkbox",
"name": "promoter-features",
"visibleIf": "{nps-score} >= 9",
"title": "Which of the following features do you value the most?",
"description": "Please select no more than three features.",
"isRequired": true,
"choices": [
{ "value": "performance", "text": "Performance" },
{ "value": "stability", "text": "Stability" },
{ "value": "ui", "text": "User interface" },
{ "value": "complete-functionality", "text": "Complete functionality" },
{ "value": "learning-materials", "text": "Learning materials (documentation, demos, code examples)" },
{ "value": "support", "text": "Quality support" }
],
"showOtherItem": true,
"otherPlaceholder": "Please specify...",
"otherText": "Other features",
"colCount": 2,
"maxSelectedChoices": 3
}
]
},
{
"name": "page2",
"elements": [
{
"type": "boolean",
"name": "rebuy",
"title": "Would you buy our product again?"
},
]
},
{
"name": "page3",
"elements": [
{
"type": "radiogroup",
"name": "testimonial",
"title": "Would you mind providing us a brief testimonial for the website?",
"choices": [
{ "value": "yes", "text": "Sure!" },
{ "value": "no", "text": "No" }
]
},
{
"type": "text",
"name": "email",
"visibleIf": "{testimonial} = 'yes'",
"title": "What is your email address?",
"validators": [{
"type": "email"
}],
"placeholder": "Enter your email here"
}
]
}
],
"showPrevButton": false,
"widthMode": "static",
"width": "1000px"
};
```
### `src/SurveyCreatorComponent.jsx`
```js
import React from "react";
import { SurveyCreator, SurveyCreatorComponent } from "survey-creator-react";
import "survey-core/survey.i18n";
import "survey-creator-core/survey-creator-core.i18n";
import { PropertyGridComponent } from "survey-creator-react";
import { ReactElementFactory } from "survey-react-ui";
import { NpsSurvey } from "./nps_survey";
import { Component } from "react";
import "survey-core/survey-core.css";
import "survey-creator-core/survey-creator-core.css";
import "./index.css";
import SurveyTheme from "survey-core/themes";
import { registerCreatorTheme } from "survey-creator-core";
registerCreatorTheme(SurveyTheme); // Add predefined Survey Creator UI themes
class CustomPropertyGridWrapper extends Component {
constructor(props) {
super(props);
this.clearSurvey = this.clearSurvey.bind(this);
this.loadNps = this.loadNps.bind(this);
}
setCreatorJson(val) {
this.props.model.creator.JSON = val;
}
render() {
const model = this.props.model;
if (!model) return null;
return (