TagFormModal

Overview

The TagFormModal component is a React component that displays a modal form that can be used to create a new tag or update an existing tag. The form works in the “Create” or “Update” mode depending on its props passed.

Permissions

To access this component, the entity user must have create and update permissions for the tag object. For more information, see List of permissions.

Preview

Usage

Use the TagFormModal component to create new tags and update details of an existing tag. To create a new tag, import the TagFormModal component and bring it into your application as shown:

Create new tag
1import { TagFormModal } from "@monite/sdk-react";
2
3// This component must be rendered within the MoniteProvider wrapper
4return <TagFormModal open />;

To update details of an existing tag, use the TagFormModal component with the tag prop. The tag prop accepts an object with tag UUID and tag name as shown:

Rename existing tag
1import { TagFormModal } from "@monite/sdk-react";
2
3// This component must be rendered within the MoniteProvider wrapper
4return (
5  <TagFormModal
6    open
7    tag={{
8      id: "ea837e28-509b-4b6a-a600-d54b6aa0b1f5",
9      name: "Existing tag",
10    }}
11  />
12);

Props

PropTypeDescription
onClosefunctionThis is a callback function triggered when the modal form is closed. For example, after clicking the “Cancel” button.
onCreatefunctionThis is a callback function triggered upon successful tag creation.
openbooleanThis prop determines whether the modal is opened or closed.
tagobjectThis prop defines the tag ID and name. It is required when updating a tag.

The tag prop accepts an object that contains two mandatory fields:

  • id (string) - the UUID of an existing tag you want to delete.
  • name (string) - the tag name to display in the prompt.