@hyvor/hyvor-talk-svelte
v0.0.7
Published
Hyvor Talk Svelte Component
Downloads
146
Readme
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.