@hyvor/hyvor-talk-react

$3

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

$3

The following components are available:

- - wraps
- - wraps
- - wraps
- - wraps
- - wraps

$3

Use the component to add comments to your webpage. The props are the same as the attributes of hyvor-talk-comments.

`jsx
import React from "react";
import { Comments } from "@hyvor/hyvor-talk-react";

const App = () => {
return ;
};
`

$3

Use the 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 components to your app. Then, call CommentCounts.load() in onMount to load the comment counts.

`jsx
import React from "react";
import { CommentCount } from "@hyvor/hyvor-talk-react";
import { CommentCounts } from "@hyvor/hyvor-talk-base";

const App = () => {
useEffect(() => {
CommentCounts.load({
"website-id": YOUR_WEBSITE_ID,
});
}, []);

return (



);
};
`

$3

Use the component to add a newsletter form to your webpage. The props are the same as the attributes of hyvor-talk-newsletter.

`tsx
import React from "react";
import { NewsletterForm } from "@hyvor/hyvor-talk-react";

const App = () => {
return ;
};
`

$3

Use the component to add memberships to your webpage. The props are the same as the attributes of hyvor-talk-memberships.

`tsx
import React from "react";
import { Memberships } from "@hyvor/hyvor-talk-react";

const App = () => {
return ;
};
`

Once you have memberships set up, you can use the component to show content only to members. The props are the same as the attributes of hyvor-talk-gated-content. The key prop is renamed to _key to avoid conflicts with the reserved key prop in React.

`tsx
import React from "react";
import { GatedContent } from "@hyvor/hyvor-talk-react";

const App = () => {
return ;
};
`

---

$3

You can listen to events emitted by the components using the on prop. This is supported by all components that have events.

`jsx
import React from "react";

const App = () => {
return (
website-id={YOUR_WEBSITE_ID}
on={{
loaded: () => console.log("Comments loaded"),
"comment:published": (comment) =>
console.log("Comment published", comment),
}}
/>
);
};
`

$3

You can access the underlying Web Component instance using the ref prop, which returns an object with two methods: wrap and element. This is supported by all components.

`jsx
import React, { useRef, useEffect } from "react";
import { type CommentsCustomElement } from "@hyvor/hyvor-talk-base";

const App = () => {
const commentsRef = useRef < {
wrap: () => HTMLDivElement;
element: () => CommentsCustomElement;
} | null > (null);

useEffect(() => {
if (commentsRef.current) {

// This is the wrapping