Hyvor Talk React Component
npm install @hyvor/hyvor-talk-react``bash`
npm install @hyvor/hyvor-talk-react
The following components are available:
-
-
-
-
-
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
};
`
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
element
const wrap = commentsRef.current.wrap(); // This is the underlying element
const element = commentsRef.current.element();
// Listen to events
element.addEventListener('loaded', () => {
// Call API methods
console.log(element.api.page());
});
}
}, []);
return (
ref={commentsRef}
website-id={YOUR_WEBSITE_ID}
/>
);
};
``