@itwin/presentation-rules-editor-react

A set of React components used by Presentation Rules Editor.

Installation

1npm install @itwin/presentation-rules-editor-react

Usage

The following example demonstrates how to assemble a basic Presentation rules editor out of provided React components:

1import * as monaco from "monaco-editor";
2import { useEffect, useState } from "react";
3import { IModelConnection } from "@itwin/core-frontend";
4import { ContentSpecificationTypes, Ruleset, RuleTypes } from "@itwin/presentation-common";
5import { EditableRuleset, PropertyGrid, SoloRulesetEditor, Tree } from "@itwin/presentation-rules-editor-react";
6
7function MyComponent(props: { iModel: IModelConnection }): React.ReactElement {
8  const [editableRuleset] = useState(() => new EditableRuleset({ initialRuleset: ruleset }));
9  const [rulesetEditor] = useState(
10    () => new SoloRulesetEditor({ editableRuleset, monaco, contributions: { submitButton: true } }),
11  );
12
13  useEffect(
14    () => {
15      // Free resources when MyComponent unmounts
16      return () => {
17        rulesetEditor.dispose();
18        editableRuleset.dispose();
19      };
20    },
21    [editableRuleset, rulesetEditor],
22  );
23
24  return (
25    <>
26      <rulesetEditor.Component width={800} height={600} />
27      <Tree
28        width={350}
29        height={400}
30        iModel={props.iModel}
31        editableRuleset={editableRuleset}
32      />
33      <PropertyGrid
34        width={350}
35        height={400}
36        iModel={props.iModel}
37        editableRuleset={editableRuleset}
38      />
39    </>
40  );
41}
42
43const ruleset: Ruleset = {
44  id: "ruleset1",
45  rules: [{
46    ruleType: RuleTypes.Content,
47    specifications: [{
48      specType: ContentSpecificationTypes.SelectedNodeInstances,
49    }],
50  }],
51};