Gatsby Kontent Components

Gatsby plugin library Stack Overflow

npm version npm

The package containing React components useful when processing Kontent data to the site.


npm install @kentico/gatsby-kontent-components

Rich text element component

Rich text elements from Kentico Kontent could be resolved to React components using “html-react-parser” as described in this article.

This package should make the usage easier. Basically by loading the rich text data and use these components to provide this data and resolution functions.

Complete showcase could be found in rich-text.js in the development site.

import { RichTextElement } from "@kentico/gatsby-kontent-components"

// ...

      resolveImage={image => {
        return (
            alt={image.description ? image.description :}
      resolveLink={(link, domNode) => {
        const parentItemType = contextData.type // It is possible to use external data for resolution
        return (
          <Link to={`/${link.type}/partner/${parentItemType}/${link.url_slug}`}>
      resolveLinkedItem={linkedItem => {
        return <pre>{JSON.stringify(linkedItem, undefined, 2)}</pre>
      resolveDomNode={(domNode, domToReact) => {
        if ( === "table") {
          // For options - check
          return (
            <div className="table-responsive">

Resolution scope

If you don’t need to resolve anything, you could just provide value property.


If you want to resolve images pass images and resolveImage properties.

  • images have to contain at least image_id property
  • resolveImage has one parameter image basically containing one record from images array

If you want to resolve links to other content items pass links and resolveLink properties.

All other links (web URL, email, asset link) are not resolved. If you could use this functionality, please submit a feature request.

  • links have to contain at least link_id property
  • resolveLink has two parameter link basically containing one record from links array and domNode dome link element that could be used for i.e. getting the inner text of the current link domNode.children[0].data.

Content components and Linked content items

If you want to resolve images pass linkedItems and resolveLinkedItem properties.

  • linkedItems have to contain at least system.codename property
  • resolveLinkedItem has one parameter linkedItem basically containing one record from linkedItems array

Custom resolution for any other dom node

The general resolution method resolveDomNode is called for every DOM node, except for ones that are resolved specifically (described above). In the example above, all table elements will be wrapped with the div element. You could also return just a JSX if you want to replace the domNode completely.

If you want to resolve elements via resolveDomNode, you get the following parameters: