@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:

1. loki - checks that your current stories are matched with what you already have (Storybook server should run)
2. loki:update - Regenerate all snapshots despite what you already have (Storybook server should run)
3. 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.