https://github.com/kontent-ai/react-components
Package containing React components useful when processing Kontent.ai's data to the site.
https://github.com/kontent-ai/react-components
components hacktoberfest javascript kontent kontent-ai kontent-ai-tool react typescript
Last synced: 12 months ago
JSON representation
Package containing React components useful when processing Kontent.ai's data to the site.
- Host: GitHub
- URL: https://github.com/kontent-ai/react-components
- Owner: kontent-ai
- License: mit
- Created: 2022-02-15T15:24:32.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2024-04-29T10:34:58.000Z (about 2 years ago)
- Last Synced: 2024-04-29T11:42:14.160Z (about 2 years ago)
- Topics: components, hacktoberfest, javascript, kontent, kontent-ai, kontent-ai-tool, react, typescript
- Language: TypeScript
- Homepage: https://kontent.ai
- Size: 1.59 MB
- Stars: 4
- Watchers: 4
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
# Kontent.ai's React Components
>[!WARNING]
>**Deprecation notice**
>
>This repository has been archived and is no longer maintained. Module superseded by [@kontent-ai/rich-text-resolver](https://github.com/kontent-ai/rich-text-resolver-js).
The package containing React components useful when processing Kontent.ai's data to the site.
## Install
```sh
npm install @kontent-ai/react-components
```
### Typescript
Components exports their typescript definitions so that you know what data format you need to provide via props and what data format expect from function prop callback arguments.
## Rich text element component
Rich text elements from Kontent.ai could be resolved to React components using [html-react-parser](https://www.npmjs.com/package/html-react-parser) (based on [this article](https://rshackleton.co.uk/articles/rendering-kentico-cloud-linked-content-items-with-react-components-in-gatsby))
This package should make the usage easier. Basically by loading the rich text data and use these components to provide this data and resolver functions.
> More showcases could be found in [RichTextElement.spec.tsx](./tests/components/rich-text-element/RichTextElement.spec.tsx).
```tsx
import { createDeliveryClient, Elements } from '@kontent-ai/delivery-sdk';
import { isComponent, isLinkedItem, RichTextElement } from '@kontent-ai/react-components';
import { Element as DomHandlerElement } from 'domhandler';
// ...
const client = createDeliveryClient({
environmentId: ''
});
const response = await client.item(""))
.toPromise();
// ...
{
if (isComponent(domElement)) {
return (
<>
Component
{JSON.stringify(linkedItem, undefined, 2)};
>
);
}
if (isLinkedItem(domElement)) {
return (
<>
Linked item
{JSON.stringify(linkedItem, undefined, 2)};
>
);
}
throw new Error("Unknown type of the linked item's dom node");
},
resolveImage: (image, { domElement, domToReact }): JSX.Element => (
),
resolveLink: (link, { domElement, domToReact }): JSX.Element => (
{domToReact(domElement.children)}
),
resolveDomNode: ({ domNode, domToReact }) => {
if (domNode instanceof DomHandlerElement && domNode.name === 'table') {
return {domToReact([domNode])};
}
}
}}
/>
```
### Multilevel resolving
If you want to resolve multiple levels of components and linked items in rich text, it is possible to use the component recursively and reuse the resolving logic.
There is an example when rich text can have `row` components, and these can contains `column` components with html.
```tsx
// resolving functionality
const resolveLinkedItemsRecursively: ResolveLinkedItemType = (
linkedItem,
_domNode
) => {
switch (linkedItem?.system.type) {
case "row":
return (
);
case "column":
return (
);
}
};
// SO the top level rich text would define
;
```
> ⚠ Recursive resolution could lead to infinite loops, if you have a circular dependency. To avoid that, you can store the codenames of already processed items and if you hit the same one during resolution, break the resolution chain - this could happen only if you use linked items, not components in rich text.
### Return vs. Mutate DOM Node
By returning the react components in any of the resolvers functions, you stop traversing the DOM tree under the current DOM node (its children). If you just want to avoid that behavior, you can mutate the provided DOM node and return `undefined`.
In this showcase a simple html is being resolved and for `
` tags and all `` tags a proper class is being set without stopping and traversing.
```tsx
Lorem ipsum with bold text
",
}}
resolvers={{
resolveDomNode: ({ domNode, domToReact }) => {
if (domNode instanceof DomHandlerElement) {
if (domNode.name === "strong") {
domNode.attribs.class = domNode.attribs.class
? domNode.attribs.class + " strongClass"
: "strongClass";
return undefined;
} else if (domNode.name === "p") {
domNode.attribs.class = domNode.attribs.class
? domNode.attribs.class + " pClass"
: "pClass";
return undefined;
}
}
},
}}
/>
```
The outcome is
```html
Lorem ipsum with
bold text
```
## Feedback
If you have any feedback, feel free to submit an issue or open a PR!