@hyvor/hyvor-talk-svelte v0.0.7

Installation

npm install @hyvor/hyvor-talk-svelte

Usage

The library contains two components:

• <Comments> - The comments embed (wrapper around <hyvor-talk-comments>)
• <CommentCount> - Comment counts widget (wrapper around <hyvor-talk-comment-count>)

Comments

All props in the <Comments> component are the same as the base hyvor-talk-comments Web Component.

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

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

Use the on: directive to listen to events emitted by the component.

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

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

Comment Counts

All props in the <CommentCount> component are the same as the base hyvor-talk-comment-count Web Component.

If you only have one <CommentCount> on the page, use the component directly:

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

<CommentCount
    page-id={PAGE_ID}
    website-id={YOUR_WEBSITE_ID}
/>

If you have multiple <CommentCount> in the page, use loading="manual" prop on each component and call loadCommentCounts() function when the components are mounted. This will reduce the number of API calls needed.

<script>
    import { CommentCount, loadCommentCounts } from '@hyvor/hyvor-talk-svelte';
    import { onMount } from 'svelte';

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

<div>
    <CommentCount
        page-id={PAGE_ID_1}
        loading="manual"
    />
    <CommentCount
        page-id={PAGE_ID_2}
        loading="manual"
    />
</div>

loadCommentCounts function has the following signature:

loadCommentCounts(
    options: {
        "website-id"?: number,
        mode?: 'text' | 'number',
        language?: string,
    } = {},
    callback: ((count: number | string, el: Element) => string | number) | null = null
): void

See the comment counts documentation for more details.