npm package: @hyvor/hyvor-talk-svelte
Description: Hyvor Talk Svelte Component
Latest version: 1.0.1

### Installation

```bash
npm install @hyvor/hyvor-talk-svelte
```

### Usage

The following components are available:

-   **`<Comments>`** - wraps [`<hyvor-talk-comments>`](https://talk.hyvor.com/docs/comments)
-   **`<CommentCount>`** - wraps [`<hyvor-talk-comment-count>`](https://talk.hyvor.com/docs/comment-counts)
-   **`<NewsletterForm>`** - wraps [`<hyvor-talk-newsletter>`](https://talk.hyvor.com/docs/newsletters)
-   **`<Memberships>`** - wraps [`<hyvor-talk-memberships>`](https://talk.hyvor.com/docs/memberships)
-   **`<GatedContent>`** - wraps [`<hyvor-talk-gated-content>`](https://talk.hyvor.com/docs/gated-content)

### Comments

Use the `<Comments>` component to add comments to your webpage. The props are the same as the attributes of [hyvor-talk-comments](https://talk.hyvor.com/docs/comments#attributes).

```svelte
<script>
    import { Comments } from '@hyvor/hyvor-talk-svelte';
</script>

<Comments
    website-id={YOUR_WEBSITE_ID}
    page-id={UNIQUE_PAGE_ID}
/>
```

### Comment Counts

Use the `<CommentCount>` component to display the number of comments on a page.
All props are the same as the base [hyvor-talk-comment-count](https://talk.hyvor.com/docs/comment-counts) Web Component.

First, add the `<CommentCount>` components to your app. Then, call `CommentCounts.load()` in `onMount` to load the comment counts.

```svelte
<script>
    import { CommentCount } from '@hyvor/hyvor-talk-svelte';
    import { CommentCounts } from '@hyvor/hyvor-talk-base';
    import { onMount } from 'svelte';

    onMount(() => {
        CommentCounts.load({
            'website-id': YOUR_WEBSITE_ID,
        });
    })
</script>

<CommentCount page-id="my-page-1" />
<CommentCount page-id="my-page-2" />
```

### Newsletter Form

Use the `<NewsletterForm>` component to add a newsletter form to your webpage. The props are the same as the attributes of [hyvor-talk-newsletter](https://talk.hyvor.com/docs/newsletters#form-properties).

```svelte
<script>
    import { NewsletterForm } from '@hyvor/hyvor-talk-svelte';
</script>

<NewsletterForm
    website-id={YOUR_WEBSITE_ID}
/>
```

### Memberships & Gated Content

Use the `<Memberships>` component to add memberships to your webpage. The props are the same as the attributes of [hyvor-talk-memberships](https://talk.hyvor.com/docs/memberships#component-attributes).

```svelte
<script>
    import { Memberships } from '@hyvor/hyvor-talk-svelte';
</script>

<Memberships
    website-id={YOUR_WEBSITE_ID}
/>
```

Once you have memberships set up, you can use the `<GatedContent>` component to show content only to members. The props are the same as the attributes of [hyvor-talk-gated-content](https://talk.hyvor.com/docs/gated-content#component-attributes).

```svelte
<script>
    import { GatedContent } from '@hyvor/hyvor-talk-svelte';
</script>

<GatedContent key="my-content" />
```

---

### Listening to Events

Use the `on:` directive to listen to [events](https://talk.hyvor.com/docs/comments#events) emitted by the component. Supported by all components.

```svelte
<Comments
    website-id={YOUR_WEBSITE_ID}
    page-id={UNIQUE_PAGE_ID}

    on:loaded={() => console.log('Comments loaded')}
    on:comment:published={() => console.log('Comment published')}
/>
```

### Accessing the Web Component Instance

Bind the `element` prop to a variable to access the underlying Web Component instance. This is useful to call [API methods](https://talk.hyvor.com/docs/comments#api).

```svelte
<script>
    import { Comments } from '@hyvor/hyvor-talk-svelte';
    import { onMount } from 'svelte';

    let element;

    function onLoad() {
        console.log(element.api.page());
    }
</script>

<Comments
    website-id={YOUR_WEBSITE_ID}
    page-id={UNIQUE_PAGE_ID}
    bind:element
    on:loaded={onLoad}
/>
```