Render Prezly Content Format documents used at Prezly.
npm install --save @prezly/content-renderer-react-js
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
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>
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>
);
}
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
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 likeloki
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.