TagFormModal

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.

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:

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:

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

Prop	Type	Description
`onClose`	`function`	This is a callback function triggered when the modal form is closed. For example, after clicking the "Cancel" button.
`onCreate`	`function`	This is a callback function triggered upon successful tag creation.
`open`	`boolean`	This prop determines whether the modal is opened or closed.
`tag`	`object`	This 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.