Giscus Component

Overview

The giscus-component is a wrapper component for giscus, a comments system powered by GitHub Discussions. It is currently available for React, Vue, Svelte, Solid, and as a WebComponent. This component allows users to easily integrate the giscus comments system into their web applications.

Features

• Supports React, Vue, Svelte, Solid, and WebComponent
• Easy installation and integration
• Allows customization of <iframe> styles

Using the React, Vue, Svelte, or Solid component

1. Install the corresponding package for the desired framework.
2. Import the default export from the package.
3. Use the component in your code.

Example for React:

import GiscusComponent from '@giscus/react';

// Use the component in your code
<GiscusComponent repo="owner/repo" issue-id="123" />

Using the Web component

1. Install the giscus package.
2. Import it in your code.
3. Use it in your HTML.

Example:

import 'giscus';

// Use it in your HTML
<giscus-repo repo="owner/repo" issue-id="123"></giscus-repo>

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-repo {
  background-color: #f4f4f4;
  border: none;
}

giscus-repo iframe {
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

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

.giscus-container {
  height: 400px;
  overflow: scroll;
}

Note that these styles only apply to the <iframe> element and not its contents. To style the contents, a custom theme needs to be used.

Summary

The giscus-component is a versatile wrapper component for integrating the giscus comments system into web applications. It supports multiple frameworks and provides easy installation and customization options. Developers can easily add a commenting feature to their websites using this component.