giscus-component

A wrapper component for giscus 💎, a comments system powered by GitHub Discussions. Currently available for React, Vue, Svelte, Solid, and as a Web Component.

Documentation

Using the React, Vue, Svelte, or Solid component

To use the React, Vue, Svelte, or Solid component, install the corresponding package.

npm i @giscus/react   # for React/Preact
npm i @giscus/vue     # for Vue
npm i @giscus/svelte  # for Svelte
npm i @giscus/solid   # for Solid
# Change npm with the package manager you use

Then, import the default export from the package. Example for React:

import Giscus from '@giscus/react';

export default function MyApp() {
  return (
    <Giscus
      id="comments"
      repo="giscus/giscus-component"
      repoId="MDEwOlJlcG9zaXRvcnkzOTEzMTMwMjA="
      category="Announcements"
      categoryId="DIC_kwDOF1L2fM4B-hVS"
      mapping="specific"
      term="Welcome to @giscus/react component!"
      reactionsEnabled="1"
      emitMetadata="0"
      inputPosition="top"
      theme="light"
      lang="en"
      loading="lazy"
    />
  );
}

The prop names are the same as the data- attributes shown on the giscus website, but written in camelCase with the data- prefix and dashes removed.

Using the web component

To use the Web component, install the giscus package.

npm i giscus

Then import it in your code.

import 'giscus';

Alternatively, you can also use a bundling CDN like esm.sh.

<!-- esm.sh -->
<script type="module" src="https://esm.sh/giscus"></script>

Then use it in your HTML.

<giscus-widget
  id="comments"
  repo="giscus/giscus"
  repoid="MDEwOlJlcG9zaXRvcnkzNTE5NTgwNTM="
  category="General"
  categoryid="MDE4OkRpc2N1c3Npb25DYXRlZ29yeTMyNzk2NTc1"
  mapping="specific"
  term="Welcome to giscus!"
  reactionsenabled="1"
  emitmetadata="0"
  inputposition="top"
  theme="light"
  lang="en"
  loading="lazy"
></giscus-widget>

The attribute names are the same as the data- attributes shown on the giscus website, but written in lowercase with the data- prefix and dashes removed.

Changing the <iframe> styles

You can style the <iframe> in your CSS by selecting the web component, or the iframe part specifically. For example:

giscus-widget {
  display: flex;
  margin: auto;
  max-width: 640px;
}
/* or... */
#comments {
  /* ... */
}
/* or... */
#comments::part(iframe) {
  /* ... */
}
/* etc. */

You can also make the widget scrollable by creating a parent container with a limited height and overflow: scroll, for example:

<div class="comments-container">
  <giscus-widget
    ...
  >
  </giscus-widget>
</div>

.comments-container {
  max-height: 640px;
  overflow-y: scroll;
}

Note that this only allows you to style the <iframe> element and not the iframe's contents. If you want to style the contents, you need to use a custom theme.

Notes

When you change the props/attributes of the React, Vue, and web components, they will automatically update the giscus configuration using postMessage() to the underlying <iframe> element without reloading the comments. Unfortunately, this doesn't work for Svelte and Solid as they always reload the web component for some reason. If you know how to fix this, please let me know.

Further information

See the demo and its code example. For more information, read the documentation on the giscus website and its advanced usage guide.

Packages

This is a monorepo. The base component is written using Lit as a web component. The other components are built as a wrapper around the web component for convenience.

Related Article

Introducing giscus

License

Copyright © 2021-2022 laymonage.

Released under the MIT license.