# commentable
> Client side library for Commentable.rs
Latest version **1.0.0** (published 2020-01-14) · MIT license · 0 weekly downloads
## Install
```sh
npm install commentable
pnpm add commentable
yarn add commentable
bun add commentable
```
## 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.0 |
| Published | 2020-01-14 |
| First published | 2020-01-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 936.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | commentable |
## Links
- npm: https://www.npmjs.com/package/commentable
- npm.io page: https://npm.io/package/commentable
## Dependencies (3)
- [dayjs](https://npm.io/package/dayjs.md) ^1.8.17
- [classnames](https://npm.io/package/classnames.md) ^2.2.6
- [@stencil/state-tunnel](https://npm.io/package/@stencil/state-tunnel.md) ^1.0.1
## Recent versions
- 1.0.0 (latest) — 2020-01-14
- 0.1.0 — 2020-01-13
## README
# Commentable.js
### What is it?
Commentable.js is the official client-side library for [Commentable.rs](https://github.com/netguru/commentable-rs).
It's implemented using WebComponents, which makes it lightweight and easy to embed on any website.
The styles are highly customizable and you can even provide your own set of reactions!
### Installation
The easiest way to install the Commentable components is by using CDN:
```html
```
Alternatively, if you're using Webpack or any other bundler you can install the library from NPM:
```shell
$> npm install commentable
```
but in this case you also have to initialize the components by including this script somewhere in the root of your application:
```javascript
import { applyPolyfills, defineCustomElements } from 'commentable/loader';
applyPolyfills().then(() => {
defineCustomElements(window);
});
```
### Usage
You can embed Commentable simply by using the `` tag. Here's an example:
```html
```
The `container` div is not necessary, but you will need to wrap `ct-commentable` in some parent element to define it's size.
### Attributes
- `commentable-id` - this is an arbitrary ID that identifies the entity owning the comments. For example, on a news website the commentable-id should be the article id. It can also be a name, as long as it's unique. In a SPA application you can dynamically change this attribute and the component will update it's contents.
- `api-url` - this is the URL of your [Commentable.rs](https://github.com/netguru/commentable-rs) instance. Refer to it's README for more information.
- `config` - You can specify the available reactions here. The `type` has to be a unique name of the reaction and `code` can be an emoji or other text. Since WebComponents don't support JSON attributes, the value needs to be a string, but it has to contain a valid JSON object.
- `google-id-token` - this attribute can be set when the user is authenticated. It needs to be the `id_token` from Google's Auth Response. See example below.
### Google Auth example
Here's a basic authentication example using the Google Sign In button:
Import the Google SDK first:
```html
...
```
And here's how we can handle the authentication event:
```html