Installation

npm install @hyvor/hyvor-talk-react

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.

import React from 'react';
import { Comments } from '@hyvor/hyvor-talk-react';

const App = () => {
    return (
        <Comments
            website-id={YOUR_WEBSITE_ID}
            page-id={UNIQUE_PAGE_ID}
        />
    );
};

In addition, you can pass a on prop 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'),
        '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:

import React from 'react';
import { CommentCount } from '@hyvor/hyvor-talk-react';

const App = () => {
    return (
        <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.

import React from 'react';
import { CommentCount, loadCommentCounts } from '@hyvor/hyvor-talk-react';

const App = () => {

    useEffect(() => {
        loadCommentCounts({
            'website-id': YOUR_WEBSITE_ID,
        });
    }, []);

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