Components

Customizing components is an advanced use case. It requires some understanding of how component-based JS frameworks (ex: React) works. The following components in the Hyvor Talk comments embed are customizable.

How to customize components

The Hyvor Talk embed is built using Preact, a lightweight React-compatible library. To customize components, you have to set the components property in the <hyvor-talk-comments> with a key-value pair of the component name and the component function.

Creating components requires you to load the Preact library. The easiest way would be loading it as a module.

<script type="module">
    import { h } from 'https://unpkg.com/preact?module';

    const comments = document.querySelector('hyvor-talk-comments');
    comments.components = {
        'icon.thumbsUp': () => h('span', null, '👍'),
    }
    comments.load();

</script>

Tip: To replace an icon with another SVG icon, you may use the dangerouslySetInnerHTML attribute.


'icons.star': () => h('svg', {
   dangerouslySetInnerHTML: {
      __html: '<svg></svg>'
  }
}

List of components

The following components are customizable.