# @prezly/slate-renderer

> Render Slate documents used at Prezly

Latest version **0.3.0** (published 2021-11-08) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install @prezly/slate-renderer
pnpm add @prezly/slate-renderer
yarn add @prezly/slate-renderer
bun add @prezly/slate-renderer
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 0.3.0 |
| Published | 2021-11-08 |
| First published | 2021-01-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 7 |
| Unpacked size | 406 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 64 |
| Maintainers | digitalbase, e1npm, yuriyyakym, satoav, makanda |

## Links

- npm: https://www.npmjs.com/package/@prezly/slate-renderer
- Repository: https://github.com/prezly/slate
- Homepage: https://github.com/prezly/slate#readme
- Issues: https://github.com/prezly/slate/issues
- npm.io page: https://npm.io/package/@prezly/slate-renderer

## Dependencies (7)

- [shave](https://npm.io/package/shave.md) ^2.5.10
- [react-use](https://npm.io/package/react-use.md) ^15.3.8
- [striptags](https://npm.io/package/striptags.md) ^3.1.1
- [classnames](https://npm.io/package/classnames.md) ^2.2.6
- [react-modal](https://npm.io/package/react-modal.md) ^3.12.1
- [@prezly/slate-types](https://npm.io/package/@prezly/slate-types.md) ^0.3.0
- [@prezly/linear-partition](https://npm.io/package/@prezly/linear-partition.md) ^1.0.0

## Recent versions

- 0.3.0 (latest) — 2021-11-08
- 0.2.2 — 2021-10-28
- 0.2.1 — 2021-10-22
- 0.2.0 — 2021-10-21
- 0.2.0-alpha.3 — 2021-10-21
- 0.2.0-alpha.2 — 2021-10-21
- 0.2.0-alpha.1 — 2021-10-21
- 0.2.0-alpha.0 — 2021-10-20
- 0.1.8 — 2021-07-15
- 0.1.7 — 2021-07-14
- 0.1.6 — 2021-07-07
- 0.1.5 — 2021-06-07
- 0.1.4 — 2021-05-13
- 0.1.3 — 2021-04-29
- 0.1.2 — 2021-04-07
- … 41 more at https://npm.io/package/@prezly/slate-renderer/versions

## README

# @prezly/slate-renderer

Render [Slate](https://www.slatejs.org/) documents used at [Prezly](https://www.prezly.com/?utm_source=github&utm_campaign=@prezly/slate-renderer).

![Version](https://img.shields.io/npm/v/@prezly/slate-renderer)
![License](https://img.shields.io/npm/l/@prezly/slate-renderer)

## Setup

### npm

```Shell
npm install --save @prezly/slate-renderer
```

#### peerDependencies

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

```Shell
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.

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

## Usage

```tsx
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](https://www.prezly.com/?utm_source=github&utm_campaign=@prezly/slate-renderer).

---
_Source: https://npm.io/package/@prezly/slate-renderer · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._