---
title: Custom Functions in Expressions
product: Form Library
description: You can use custom functions in expressions to control behavior of a matrix table question. For example, you can configure visibility of a follow-up text entry field to be dependent on a certain answer. View our free demo for JavaScript to learn more.
framework: React
source: https://surveyjs.io/form-library/examples/use-custom-functions-in-expressions/reactjs
index: https://surveyjs.io/form-library/examples/overview.md
---

# Custom Functions in Expressions (React)

Custom functions enable you to perform any calculations in JavaScript code and use calculation results in expressions within survey JSON schemas. This demo shows how to implement, register, and use a custom function in your survey or form. In this example, a custom function counts matrix rows with a specific value. If all three rows are answered "Agree" or "Strongly agree", the survey displays a form field for positive feedback; if all three rows receive a "Disagree" or "Strongly disagree" value, a form field for negative feedback is displayed.

To implement a custom function for use in expressions, follow the steps below:

1. Declare a JavaScript function.       
This function accepts all arguments in one array-like object. You can pass as many arguments as needed when you call the function from an expression.

    ```js
    function myFunc(params) {
      let q1_value = params[0];
      let q2_value = params[1];
      // ...
      return someValue;
    }
    ```
1. Register your function.         
Call a static `registerFunction` method. This method accepts a function name that you want to use in expressions and the function itself.

    ```js
    import { registerFunction } from "survey-core";

    function myFunc(params) {
      // ...
    }
    registerFunction({ name: "myFunc", func: myFunc });
    ```
1. Use your function in [expressions](https://surveyjs.io/form-library/documentation/design-survey/conditional-logic#expressions).       
The following code shows how to use a custom function in the [`visibleIf`](https://surveyjs.io/form-library/documentation/api-reference/question#visibleIf) property.

    ```js
    const surveyJson = {
      "elements": [{
        "type": "text",
        "name": "my-text-box",
        // ...
        "visibleIf": "myFunc({question1}, {question2}) > 0"
      }, {
        // ...
      }]
    };
    ```

> Ensure that the custom functions you use in your survey are available in the environment where it will be run. If they are unavailable, and you cannot change the environment, consider using [calculated values](https://surveyjs.io/form-library/documentation/design-survey/conditional-logic#calculated-values) instead. Unlike custom functions, calculated values are embedded in a survey JSON schema and guaranteed to be available without additional JavaScript code.

## 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 { registerFunction } from "survey-core";

function rowsWithValue (params) {
  if (!params && params.length < 2)
    return false;
  
  const [ matrixValue, values ] = params;
  var rowCount = 0;
  for (const key in matrixValue) {
    if (values.some(el => matrixValue[key] === el))
      rowCount++;
  }
  return rowCount;
}
registerFunction({ name: "rowsWithValue", func: rowsWithValue });
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": "matrix",
      "name": "qualities",
      "title": "Please indicate if you agree or disagree with the following statements",
      "isRequired": true,
      "columns": [{
        "value": 5,
        "text": "Strongly agree"
      }, {
        "value": 4,
        "text": "Agree"
      }, {
        "value": 3,
        "text": "Neutral"
      }, {
        "value": 2,
        "text": "Disagree"
      }, {
        "value": 1,
        "text": "Strongly disagree"
      }],
      "rows": [{
        "value": "affordable",
        "text": "Product is affordable"
      }, {
        "value": "does-what-it-claims",
        "text": "Product does what it claims"
      }, {
        "value": "easy-to-use",
        "text": "Product is easy to use"
      }],
      "alternateRows": true
    },
    {
      "type": "comment",
      "name": "disappointing-experience-comments",
      "title": "We are really sorry that our product failed to suit your requirements. Please let us know why you had such a disappointing experience with it.",
      "visibleIf": "rowsWithValue({qualities}, [1, 2]) = 3"
    },
    {
      "type": "comment",
      "name": "happy-customer-comments",
      "title": "Thank you for appreciating our product! Could provide us with some comments to make it even better?",
      "visibleIf": "rowsWithValue({qualities}, [4, 5]) = 3"
    }
  ]
};
```

### `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/use-custom-functions-in-expressions/angular.md)
- [Vue 3](https://surveyjs.io/form-library/examples/use-custom-functions-in-expressions/vue3js.md)
- [jQuery](https://surveyjs.io/form-library/examples/use-custom-functions-in-expressions/jquery.md)
- [Vanilla JS](https://surveyjs.io/form-library/examples/use-custom-functions-in-expressions/vanillajs.md)