@prezly/content-renderer-react-js

Prezly Content Renderer for React.js

Render Prezly Content Format documents used at Prezly.

Setup

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 React from 'react';
import { DOCUMENT_NODE_TYPE, HEADING_1_NODE_TYPE, DocumentNode } from '@prezly/slate-types';
import { Renderer } from '@prezly/slate-renderer';

const documentNode: DocumentNode = {
    children: [
        {
            children: [{ text: 'Hello world!' }],
            type: HEADING_1_NODE_TYPE,
        },
    ],
    type: DOCUMENT_NODE_TYPE,
    version: '0.50',
};

const MyComponent = () => (
    <Renderer
        nodes={documentNode} /* or nodes={[documentNode]}, up to you */
        options={{
            /* override default heading render */
            [HEADING_1_NODE_TYPE]: ({ children, className, node, ...props }) => (
                <div className={className} style={{ color: 'red' }}>
                    {children}
                </div>
            ),
        }}
    />
);

export default MyComponent;

---

Brought to you by Prezly.