@hyvor/hyvor-talk-svelte v1.0.1

Installation

npm install @hyvor/hyvor-talk-svelte

Usage

The following components are available:

• <Comments> - wraps <hyvor-talk-comments>
• <CommentCount> - wraps <hyvor-talk-comment-count>
• <NewsletterForm> - wraps <hyvor-talk-newsletter>
• <Memberships> - wraps <hyvor-talk-memberships>
• <GatedContent> - wraps <hyvor-talk-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.

<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 Web Component.

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

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

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

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

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

<GatedContent key="my-content" />

Listening to Events

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

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

<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}
/>