# @hyvor/hyvor-talk-base

> This library provides types and helper functions for creating [Hyvor Talk](https://talk.hyvor.com) Web Components.

Latest version **1.0.1** (published 2024-09-09) · 0 weekly downloads

## Install

```sh
npm install @hyvor/hyvor-talk-base
pnpm add @hyvor/hyvor-talk-base
yarn add @hyvor/hyvor-talk-base
bun add @hyvor/hyvor-talk-base
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2024-09-09 |
| First published | 2023-05-03 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 27.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | supunkavinda |

## Links

- npm: https://www.npmjs.com/package/@hyvor/hyvor-talk-base
- npm.io page: https://npm.io/package/@hyvor/hyvor-talk-base

## Recent versions

- 1.0.1 (latest) — 2024-09-09
- 1.0.0-beta.5 (beta) — 2024-09-04
- 1.0.0 — 2024-09-04
- 1.0.0-beta.4 — 2024-09-03
- 1.0.0-beta.3 — 2024-09-03
- 1.0.0-beta.2 — 2024-09-03
- 1.0.0-beta.1 — 2024-09-03
- 0.0.6-patch.2 — 2024-08-02
- 0.0.6-patch.1 — 2024-08-02
- 0.0.6 — 2024-03-20
- 0.0.5 — 2024-01-09
- 0.0.4 — 2023-07-16
- 0.0.3 — 2023-07-15
- 0.0.2 — 2023-07-15
- 0.0.1 — 2023-05-03

## README

This library provides types and helper functions for creating [Hyvor Talk](https://talk.hyvor.com) Web Components.

-   [Comments](#comments)
-   [Comment Counts](#comment-counts)
-   [Newsletters](#newsletters)
-   [Memberships](#memberships)

## Installation

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

## Comments

Add comments embed ([<hyvor-talk-comments>](https://talk.hyvor.com/docs/comments)):

```ts
import { Comments } from "@hyvor/hyvor-talk-base";

Comments.comments(
    // The same attributes as the base web component
    // See https://talk.hyvor.com/docs/comments#attributes
    {
        "website-id": 1,
        "page-id": "unique-page-id",
    },
    // The container element
    document.getElementById("comments-container"),
    // Callback for events
    // See https://talk.hyvor.com/docs/comments#events
    (event, data) => {
        console.log(event, data);
    }
);
```

## Comment Counts

Add comment count elements ([<hyvor-talk-comment-count>](https://talk.hyvor.com/docs/comment-counts)):

```ts
import { CommentCounts } from "@hyvor/hyvor-talk-base";

// first, add the elements
CommentCounts.commentCount(
    {
        "page-id": "unique-page-id",
    },
    wrap1
);

CommentCounts.commentCount(
    {
        "page-id": "unique-page-id",
    },
    wrap2
);

// then, load the counts
CommentCounts.load({
    "website-id": 1,
});
```

## Newsletters

Add newsletter form ([<hyvor-talk-newsletter>](https://talk.hyvor.com/docs/newsletter)):

```ts
import { Newsletters } from "@hyvor/hyvor-talk-base";

Newsletters.form(
    // The same attributes as the <hyvor-talk-newsletter> component
    // See https://talk.hyvor.com/docs/newsletters#form-properties
    {
        "website-id": 1,
        title: "Subscribe to our newsletter",
    },
    wrap // The container element
);
```

## Memberships

Add the memberships embed ([&lt;hyvor-talk-memberships&gt;](https://talk.hyvor.com/docs/memberships)):

```ts
import { Memberships } from "@hyvor/hyvor-talk-base";

Memberships.memberships(
    // The same attributes as the <hyvor-talk-memberships> component
    // See https://talk.hyvor.com/docs/memberships#component-attributes
    {
        "website-id": 1,
        "sso-user": "{}",
        "sso-hash": "hash",
    }
);
```

Once you have added the memberships embed, you can add gated content ([&lt;hyvor-talk-gated-content&gt;](https://talk.hyvor.com/docs/memberships#gated-content)):

```ts
import { Memberships } from "@hyvor/hyvor-talk-base";

Memberships.gatedContent(
    // The same attributes as the <hyvor-talk-gated-content> component
    // See https://talk.hyvor.com/docs/gated-content#component-attributes
    {
        key: "content-key",
    },
    wrap // The container element
);
```

---

## Legacy Functions

The following functions are only available for legacy purposes. We recommend using the functions above for new projects.

### `addComments(props, container, onEvent)`

Adds `<hyvor-talk-comments>` ([docs](https://talk.hyvor.com/docs/install)) to the given container.

```ts
import { addComments } from "@hyvor/hyvor-talk-base";

addComments(
    {
        "website-id": 1,
        "page-id": "unique-page-id",
    },
    document.getElementById("comments-container"),
    (event, data) => {
        console.log(event, data);
    }
);
```

### `addCommentCounts(props)`

Adds the script that registers the `<hyvor-talk-comment-count>` custom element to the page. Note that unlike `addComments`, this function does not add the element to the page. You need to add `<hyvor-talk-comment-count>` elements to the page manually, and then call this function to load the comment counts.

```ts
import { addCommentCounts } from "@hyvor/hyvor-talk-base";

addCommentCounts({
    "website-id": 1,
    "page-id": "unique-page-id",
});
```

Example usage with React:

```tsx
export function CommentCount(props: CommentCountProps) {
    useEffect(() => addCommentCounts(props), []);
    return <hyvor-talk-comment-count {...props} />;
}
```

> `addCommentCounts` function automatically calls `loadCommentCounts` if `loading="manual"` is not set.

### `loadCommentCounts(props)`

Loads comment counts from Hyvor Talk servers and updates the `<hyvor-talk-comment-count>` elements. See [the docs](https://talk.hyvor.com/docs/comment-counts) for more information on optimized usage.

```ts
import { loadCommentCounts } from "@hyvor/hyvor-talk-base";

loadCommentCounts({
    "website-id": 1,
});
```

---
_Source: https://npm.io/package/@hyvor/hyvor-talk-base · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._