# salla-comment-form (https://docs.salla.dev/twilight/react/web-components/salla-comment-form)



{/* Generated by scripts/sync-web-components.mjs from the components docs.json. Do not edit by hand. */}

A form for a customer to post a comment on a page, blog post or product. It renders nothing unless the current customer
is allowed to comment (`user.can_comment` in the store config). The text is required, between 4 and 500 characters, and a
submitted comment is sent for review (it is marked pending). Use it with `salla-comments`, which can listen to `commentAdded`
to show the new comment right away.

## Use it [#use-it]

In HTML or JSX, use the tag `<salla-comment-form>` with the **Attribute** names below. In React, the wrapper takes the **Property** names (camelCase).

```tsx
import { SallaCommentForm } from '@salla.sa/twilight-components-react/comment-form';
```

**Client-only.** On the server this wrapper renders a placeholder (a skeleton, or nothing), and the real component mounts in the browser. Do not rely on it for content that search engines must see.

## Try it [#try-it]

<Demo name="web-components/salla-comment-form" />

## Example [#example]

```tsx
import { SallaCommentForm } from '@salla.sa/twilight-components-react/comment-form';

export function Example() {
  return (
    <SallaCommentForm type="blog" itemId="42" showAvatar />
  );
}
```

```html
<salla-comment-form type="blog" item-id="42" show-avatar></salla-comment-form>
```

## Properties [#properties]

| Property     | Attribute     | Description                                                                                                                                                                                          | Type                            | Default |
| ------------ | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------- | ------- |
| `itemId`     | `item-id`     | The ID of the product, page or blog post (as defined by `type`) the comment is for. When the store is ready it is set to the current page ID from the store config.                                  | `number \| string`              |         |
| `showAvatar` | `show-avatar` | Shows the current customer's avatar next to the text box.                                                                                                                                            | `boolean`                       |         |
| `type`       | `type`        | Type of entity the comment is for: `product`, `page` or `blog`. When the store is ready it is set from the current page: `page` on a single page, `blog` on a single blog post, otherwise `product`. | `"blog" \| "page" \| "product"` |         |

## Events [#events]

Listen with `addEventListener`, or the `on` prop of the React wrapper (for example `onModalBack`).

| Event          | Description                                                                                                                                                                                                                                                                                                             | Detail                                                                                                                                        |
| -------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
| `commentAdded` | Fires after the comment was sent successfully. `event.detail` is a locally built comment object, not the server response: `name` and `avatar` of the current customer, `content` (the submitted text), `is_pending` (always `true`), `created_at.date` (UTC time as `YYYY-MM-DD HH:mm:ss`) and an empty `images` array. | `{ id?: number; avatar?: string; name?: string; content?: string; is_pending?: boolean; created_at?: { date?: string; }; images: string[]; }` |

## Related [#related]

Renders: [`<salla-button>`](https://docs.salla.dev/twilight/react/web-components/salla-button).

Used inside: [`<salla-comments>`](https://docs.salla.dev/twilight/react/web-components/salla-comments).