0.3.0 • Published 4 years ago

@prezly/slate-renderer v0.3.0

Weekly downloads
247
License
MIT
Repository
github
Last release
4 years ago

@prezly/slate-renderer

Render Slate documents used at Prezly.

Version License

Setup

npm

npm install --save @prezly/slate-renderer

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.

0.3.0

4 years ago

0.2.2

4 years ago

0.2.0-alpha.0

4 years ago

0.2.0-alpha.2

4 years ago

0.2.0-alpha.1

4 years ago

0.2.0-alpha.3

4 years ago

0.2.1

4 years ago

0.2.0

4 years ago

0.1.8

4 years ago

0.1.7

4 years ago

0.1.6

4 years ago

0.1.5

4 years ago

0.1.4

4 years ago

0.1.3

4 years ago

0.1.2

4 years ago

0.1.1

4 years ago

0.1.0-alpha.32

4 years ago

0.1.0-alpha.31

4 years ago

0.1.0-alpha.34

4 years ago

0.1.0-alpha.33

4 years ago

0.1.0-alpha.36

4 years ago

0.1.0-alpha.35

4 years ago

0.1.0-alpha.38

4 years ago

0.1.0-alpha.37

4 years ago

0.1.0-alpha.39

4 years ago

0.1.0-alpha.40

4 years ago

0.1.0

4 years ago

0.1.0-alpha.30

4 years ago

0.1.0-alpha.29

4 years ago

0.1.0-alpha.28

4 years ago

0.1.0-alpha.27

4 years ago

0.1.0-alpha.26

4 years ago

0.1.0-alpha.25

4 years ago

0.1.0-alpha.24

4 years ago

0.1.0-alpha.22

4 years ago

0.1.0-alpha.21

4 years ago

0.1.0-alpha.20

4 years ago

0.1.0-alpha.18

4 years ago

0.1.0-alpha.19

4 years ago

0.1.0-alpha.17

4 years ago

0.1.0-alpha.14

4 years ago

0.1.0-alpha.16

4 years ago

0.1.0-alpha.15

4 years ago

0.1.0-alpha.13

4 years ago

0.1.0-alpha.12

4 years ago

0.1.0-alpha.11

4 years ago

0.1.0-alpha.10

4 years ago

0.1.0-alpha.9

4 years ago

0.1.0-alpha.8

4 years ago

0.1.0-alpha.7

4 years ago

0.1.0-alpha.6

4 years ago

0.1.0-alpha.5

4 years ago

0.1.0-alpha.4

4 years ago

0.1.0-alpha.3

4 years ago

0.1.0-alpha.2

4 years ago

0.1.0-alpha.1

4 years ago