---
title: Implement a Custom Expression Property
product: Form Library
description: The Property Grid of the Survey Creator UI is fully customizable and allows you to add custom properties to it, including those that accept expressions as values. View a free demo for JavaScript to learn how to implement a custom property for a Matrix class that displays a header in matrix table questions if the expression assigned to it evaluates to 'true'.
framework: React
source: https://surveyjs.io/form-library/examples/add-custom-expression-property/reactjs
index: https://surveyjs.io/form-library/examples/overview.md
---

# Implement a Custom Expression Property (React)

Expressions allow survey creators to manage data flow and visual elements within a survey dynamically. Most survey elements have built-in expression properties ([`visibleIf`](https://surveyjs.io/form-library/documentation/api-reference/question#visibleIf), [`enableIf`](https://surveyjs.io/form-library/documentation/api-reference/question#enableIf), [`setValueExpression`](https://surveyjs.io/form-library/documentation/api-reference/question#setValueExpression), etc.). This demo shows how to implement a custom expression property. This property controls the visibility of the table header in a Single-Select Matrix question.

To implement a custom expression property, follow the steps below:

1. Add a custom property to a desired class.        
Call `Serializer`'s `addProperty` method, passing a class name and a JSON object with [property settings](https://surveyjs.io/form-library/documentation/customize-question-types/add-custom-properties-to-a-form#survey-element-property-settings).

2. Specify the property's [`name`](https://surveyjs.io/form-library/documentation/customize-question-types/add-custom-properties-to-a-form#name) and [`type`](https://surveyjs.io/form-library/documentation/customize-question-types/add-custom-properties-to-a-form#type).              
Use the `"condition"` type for [Boolean expressions](https://surveyjs.io/form-library/documentation/design-survey/conditional-logic#conditional-visibility) or the `"expression"` type for [other expressions](https://surveyjs.io/form-library/documentation/design-survey/conditional-logic#expressions).

3. Specify the [`onExecuteExpression`](https://surveyjs.io/form-library/documentation/customize-question-types/add-custom-properties-to-a-form#onexecuteexpression) function.          
This function will be called each time a specified expression is evaluated. This function should assign the evaluation result to one of the class instance properties. For example, in this demo, the result is assigned to the [`showHeader`](https://surveyjs.io/form-library/documentation/api-reference/matrix-table-question-model#showHeader) property of a Single-Select Matrix.

Refer to the code listing for a code example.

## Files

### `public/index.html`

```html
<div id="surveyElement" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; min-height: 100%; height:100%"></div>
```

### `src/SurveyComponent.jsx`

```js
import React from "react";
import { Model } from "survey-core";
import { Survey } from "survey-react-ui";
import "survey-core/survey-core.min.css";
import "./index.css";
import { json } from "./json";
import { Serializer } from "survey-core";

Serializer.addProperty("matrix", {
   name: "showHeaderIf:condition",
   category: "logic",
   onExecuteExpression: (obj, res) => {
      obj.showHeader = res;
   }
});
function SurveyComponent() {
    const survey = new Model(json);
    survey.onComplete.add((sender, options) => {
        console.log(JSON.stringify(sender.data, null, 3));
    });
    return (<Survey model={survey} />);
}

export default SurveyComponent;
```

### `src/index.css`

```css
/* You can add your custom CSS here. */
```

### `src/index.js`

```js
import React from "react";
import { createRoot } from "react-dom/client";
import SurveyComponent from "./SurveyComponent";

const root = createRoot(document.getElementById("surveyElement"));
root.render(<SurveyComponent />);
```

### `src/json.js`

```js
export const json = {
  "elements": [
    {
      "type": "checkbox",
      "name": "car",
      "title": "Which cars have you been driven?",
      "isRequired": true,
      "colCount": 3,
      "choices": [
        "Audi", "BMW", "Citroen",
        "Ford", "Mercedes-Benz", "Nissan",
        "Peugeot", "Tesla", "Toyota",
        "Vauxhall", "Volkswagen"
      ]
    },
    {
      "type": "matrix",
      "name": "carRating",
      "isRequired": true,
      "visibleIf": "{car.length} > 0",
      "showHeaderIf": "{car.length} > 1",
      "title": "Please select the best car in each category",
      "rowsVisibleIf": "{car} contains {item}",
      "eachRowUnique": true,
      "columns": [
        "Style",
        "Performance",
        "Comfort",
        "Quality",
        "Safety",
        "Features"
      ],
      "rows": [
        "Audi", "BMW", "Citroen",
        "Ford", "Mercedes-Benz", "Nissan",
        "Peugeot", "Tesla", "Toyota",
        "Vauxhall", "Volkswagen"
      ]
    }
  ]
};
```

### `src/theme.js`

```js
export const themeJson = {};
```

### `package.json`

```json
{
  "dependencies": {
    "react": "latest",
    "react-dom": "latest",
    "survey-core": "latest",
    "survey-react-ui": "latest"
  },
  "devDependencies": {
    "react-scripts": "latest"
  }
}
```

## Other Frameworks

- [Angular](https://surveyjs.io/form-library/examples/add-custom-expression-property/angular.md)
- [Vue 3](https://surveyjs.io/form-library/examples/add-custom-expression-property/vue3js.md)
- [jQuery](https://surveyjs.io/form-library/examples/add-custom-expression-property/jquery.md)
- [Vanilla JS](https://surveyjs.io/form-library/examples/add-custom-expression-property/vanillajs.md)