@prezly/content-renderer-react-js
v0.39.2
Published
Render Prezly Content Format documents with React.js
Downloads
1,360
Keywords
Readme
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
:
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.