---
title: Hide a Category from the Property Grid
product: Survey Creator
description: Learn how to customize the Property Grid in SurveyJS and hide some of its categories using the onSurveyInstanceCreated event handler. View our JavaScript demo that illustrates how to hide the 'Conditions' category for all elements except surveys, pages, and panels by manipulating the visibility of the corresponding Property Grid panels.
framework: React
source: https://surveyjs.io/survey-creator/examples/hide-category-from-property-grid/reactjs
index: https://surveyjs.io/survey-creator/examples/overview.md
---

# Hide a Category from the Property Grid (React)

Properties in the Property Grid are organized into categories. If you want to hide one or several categories, customize the Property Grid within the [`onSurveyInstanceCreated`](https://surveyjs.io/survey-creator/documentation/api-reference/survey-creator#onSurveyInstanceCreated) event handler. In this demo, it is used to hide the Conditions category for all elements, except for survey, pages, and panels. 

Like most Survey Creator UI elements, the Property Grid is [essentially a survey](https://surveyjs.io/survey-creator/documentation/property-grid-customization#add-custom-properties-to-the-property-grid), in which categories are [pages](https://surveyjs.io/form-library/documentation/api-reference/page-model) (by default) or [panels](https://surveyjs.io/form-library/documentation/api-reference/panel-model) (if you set [`propertyGridNavigationMode`](https://surveyjs.io/survey-creator/documentation/api-reference/survey-creator#propertyGridNavigationMode) to `"accordion"`). To hide a category, you need to hide the corresponding page or panel. Find it by [category name](https://surveyjs.io/form-library/documentation/customize-question-types/add-custom-properties-to-a-form#category) using `SurveyModel`'s [`getPageByName()`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#getPageByName) or [`getPanelByName()`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#getPanelByName) method and call the `delete()` method on the page or panel object. Refer to the `onSurveyInstanceCreated` implementation in this demo for a code example.

## Files

### `public/index.html`

```html
<!-- Uncomment the following lines to enable Ace Editor in the JSON Editor tab -->
<!-- 
<script src="https://unpkg.com/ace-builds/src-min-noconflict/ace.js"></script>
<script src="https://unpkg.com/ace-builds/src-min-noconflict/ext-searchbox.js"></script>
<script src="https://unpkg.com/ace-builds/src-min-noconflict/theme-clouds_midnight.js"></script>
-->

<div id="surveyCreatorContainer" style="position: absolute; height: 100%; width: 100%"></div>
```

### `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 "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

function SurveyCreatorRenderComponent() {
    const creator = new SurveyCreator();
    // Element types for which the Conditions category should remain visible
    const whiteList = [ "survey", "page", "panel" ];
    
    creator.onSurveyInstanceCreated.add((_, { area, obj, survey }) => {
        if (area === "property-grid") {
            const mustHide = whiteList.indexOf(obj.getType()) === -1;
            if (mustHide) {
                // A category is a panel if `propertyGridNavigationMode` is `"accordion"`; otherwise, it is a page.
                const logicCategory = survey.getPageByName("logic") || survey.getPanelByName("logic");
                if (logicCategory) {
                    logicCategory.delete();
                }
            }
        }
    });
    
    creator.JSON = {
      "pages": [{
        "name": "page1",
        "elements": [{
          "type": "text",
          "name": "question1"
        }]
      }]
    }
    return (<SurveyCreatorComponent creator={creator} />);
}

export default SurveyCreatorRenderComponent;
```

### `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 SurveyCreatorRenderComponent from "./SurveyCreatorComponent";

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

### `package.json`

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

## Other Frameworks

- [Angular](https://surveyjs.io/survey-creator/examples/hide-category-from-property-grid/angular.md)
- [Vue 3](https://surveyjs.io/survey-creator/examples/hide-category-from-property-grid/vue3js.md)
- [jQuery](https://surveyjs.io/survey-creator/examples/hide-category-from-property-grid/jquery.md)
- [Vanilla JS](https://surveyjs.io/survey-creator/examples/hide-category-from-property-grid/vanillajs.md)