@prezly/content-renderer-react-js

Prezly Content Renderer for React.js

Render Prezly Content Format documents used at Prezly.

Installation

npm

npm install --save @prezly/content-renderer-react-js

peerDependencies

Make sure all peer dependencies are met (react, react-dom).

npm install --save react react-dom
npm install --save-dev @types/react @types/react-dom

object-fit-images polyfill

If you need to support older browsers, you can use this polyfill for object-fit: https://github.com/fregante/object-fit-images. This package already includes necessary syntax to work with the polyfill - all you have to do is include the polyfill.

<script src="//cdnjs.cloudflare.com/ajax/libs/object-fit-images/3.2.4/ofi.min.js"></script>
<script>
    objectFitImages();
</script>

Usage

import { DocumentNode, HeadingNode } from '@prezly/story-content-format';
import { Renderer, Component } from '@prezly/slate-renderer';

const documentNode: DocumentNode = {
    type: DocumentNode.TYPE,
    version: '0.50',
    children: [
        {
            type: HeadingNode.Type.HEADING_ONE,
            children: [{ text: 'Hello world!' }],
        },
    ],
};

export function Content() {
    return <Renderer nodes={documentNode} />;
}

// You can also override default renders by
// declaring custom renderers as children `<Component>` elements
export function ContentWithCustomHeadings() {
    return (
        <Renderer nodes={documentNode}>
            <Component
                match={isHeadingNode}
                component={({ children, node }) => <div style={{ color: 'red' }}>{children}</div>}
            />
        </Renderer>
    );
}

Development

There is a sandbox app in this repository with Hot Module Replacement. It will automatically include updates of any code changes you make locally. To start it, simply run npm run start:

npm install
npm run start

Loki

We use Loki visual testing library for storybook. There are several commands that you can use from package.json:

• loki - checks that your current stories are matched with what you already have (Storybook server should run)
• loki:update - Regenerate all snapshots despite what you already have (Storybook server should run)
• loki:static-build - Performs checks like loki does, but over builded sources from storybook, no need to run Storybook server

If Loki fails on CI you can download generated images like here

Brought to you by Prezly.