@troop.com/tiptap-react-render
v0.0.2TypeScript
Render TipTap JSON in React without the editor!
869/weekUpdated 2 years agoMITUnpacked: 487.7 KB
Published by troop.com
npm install @troop.com/tiptap-react-renderTipTap React Render
This library renders TipTap JSON payloads in React clients without embedding the editor.
$3
``
sh
npm
npm install @troop.com/tiptap-react-renderyarn
yarn add @troop.com/tiptap-react-render
`$3
typescript
// handle the document
const doc: NodeHandler = (props) => (<>{props.children})// handle a paragraph
const paragraph: NodeHandler = (props) => {
return
{props.children}
}// handle text
const text: NodeHandler = (props) => {
// you could process text marks here from props.node.marks ...
return {props.node.text}
}
// handle an image
const img: NodeHandler = (props) => {
const { src, alt, title } = props.node;
return (
)
}
// create a handlers wrapper
const handlers: NodeHandlers = {
"doc": doc,
"text": text,
"paragraph": paragraph,
"img": img,
}
// sample tip tap data
const data = {
type: "doc",
content: [
{
type: "paragraph",
content: [{
type: "text",
text: "hello world"
}],
type: "paragraph",
content: [{
type: "img",
src: "https://some-url.com/img.jpg",
alt: "some alt text"
}]
}
]
}
// render it!
const rendered =
``$3
Many folks render TipTap rich text by embedding the TipTap editor in a "read-only" mode. However, if you don't want to add TipTap as a dependency (or, like us, you're using a platform that can't support it like React Native), then this is a simple, lightweight tool for mapping TipTap nodes to presentation components!
We were inspired by Contentful's rich-text-react-renderer tool, so we built a similar one for TipTap payloads!
This repo was scaffolded using the @alexeagleson/template-react-component-library