Skip to main content

​
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

TagFormModal component 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
import { TagFormModal } from "@monite/sdk-react";

// This component must be rendered within the MoniteProvider wrapper
return <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
import { TagFormModal } from "@monite/sdk-react";

// This component must be rendered within the MoniteProvider wrapper
return (
  <TagFormModal
    open
    tag={{
      id: "ea837e28-509b-4b6a-a600-d54b6aa0b1f5",
      name: "Existing tag",
    }}
  />
);

​
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.