search

storyblok / storyblok-js-client

Universal JavaScript client for Storyblok's API
MIT License
127 stars 87 forks source link

In React, RichTextResolver resolves to string #82

Closed maurocolella closed 3 years ago

maurocolella commented 3 years ago

Hello again. With version ^3.3.0, the rich text resolver returns a string.

In React, as far as I can tell this means I need to use dangerouslySetInnerHTML to render the result as HTML.

If I try to use React.createElement, an error is produced. This is non-critical at the moment, but I would like to suggest creating a wrapper that is react-only, ie. storyblok-react-js-client, and handles this specific edge case by returning React nodes.

The reason for this is that I suspect it might otherwise become cumbersome to render nested blocks.

DominikAngerer commented 3 years ago

Hey @maurocolella! Our friend @claus already did that :) https://github.com/claus/storyblok-rich-text-react-renderer Hope that helps! :)

import { render } from 'storyblok-rich-text-react-renderer';

function RichText({ document }) {
    // document is the rich text object you receive from Storyblok,
    // in the form { type: "doc", content: [ ... ] }
    return <div>{render(document)}</div>;
}

It also supports custom components: https://github.com/claus/storyblok-rich-text-react-renderer#blok-resolvers

maurocolella commented 3 years ago

Hey @DominikAngerer thanks! That looks like it might help.

By the way, loving Storyblok so far.