{"_id":"@abidmiah128/tiptap-react-render","_rev":"3-a4e9a1c95e66e7fbef21afd5f38071e4","name":"@abidmiah128/tiptap-react-render","dist-tags":{"latest":"0.0.4"},"versions":{"0.0.2":{"name":"@abidmiah128/tiptap-react-render","version":"0.0.2","author":{"name":"troop.com"},"license":"MIT","_id":"@abidmiah128/tiptap-react-render@0.0.2","maintainers":[{"name":"abidmiah128","email":"sagemanofficial@gmail.com"}],"homepage":"https://github.com/troop-dev/tiptap-react-render#readme","bugs":{"url":"https://github.com/troop-dev/tiptap-react-render/issues"},"dist":{"shasum":"5648c65d13f76c43f12028a43358a6fb4c7fd7ef","tarball":"https://registry.npmjs.org/@abidmiah128/tiptap-react-render/-/tiptap-react-render-0.0.2.tgz","fileCount":23,"integrity":"sha512-Bc/jzm0AI8zjAnb2XFJA9tyNL61a+wMP3kqV3NL59D2bubnWvHA63DQOFx4QvKGKH9LK4x6wCKylhO3L9DI1Eg==","signatures":[{"sig":"MEQCIFZC3URU8v96+mjk+EVxaDONstsYVsXf4ae5vFmfIXC3AiB6jmrTAs3LRLzfTEAqNyVVFdq6NYAvSt0sC2+C5Z9ayQ==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":384431},"main":"dist/cjs/index.js","types":"dist/index.d.ts","module":"dist/esm/index.js","gitHead":"0a59bc59a2258b41a3ddac76e663a956d0153dc4","scripts":{"test":"jest","rollup":"rollup -c"},"_npmUser":{"name":"abidmiah128","email":"sagemanofficial@gmail.com"},"repository":{"url":"git+https://github.com/troop-dev/tiptap-react-render.git","type":"git"},"_npmVersion":"9.8.0","description":"Render TipTap JSON in React without the editor!","directories":{},"_nodeVersion":"22.15.1","dependencies":{"react-dom":"^19.1.0","jest-environment-jsdom":"^29.7.0"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^29.7.0","react":"^19.1.0","tslib":"^2.8.1","rollup":"^2.79.2","ts-node":"^10.9.2","babel-jest":"^29.7.0","typescript":"^4.9.5","@babel/core":"^7.27.1","@types/jest":"^29.5.14","@types/node":"^22.15.18","@types/react":"^19.1.4","@types/react-dom":"^19.1.5","@babel/preset-env":"^7.27.2","rollup-plugin-dts":"^4.2.3","@babel/preset-react":"^7.27.1","@testing-library/react":"^16.3.0","@rollup/plugin-commonjs":"^21.1.0","@babel/preset-typescript":"^7.27.1","@rollup/plugin-typescript":"^8.5.0","@testing-library/jest-dom":"^6.6.3","@rollup/plugin-node-resolve":"^13.3.0"},"_npmOperationalInternal":{"tmp":"tmp/tiptap-react-render_0.0.2_1747600363459_0.4720412483500873","host":"s3://npm-registry-packages-npm-production"}},"0.0.3":{"name":"@abidmiah128/tiptap-react-render","version":"0.0.3","author":{"name":"troop.com"},"license":"MIT","_id":"@abidmiah128/tiptap-react-render@0.0.3","maintainers":[{"name":"abidmiah128","email":"sagemanofficial@gmail.com"}],"homepage":"https://github.com/MohamedAbidMiah/tiptap-react-render#readme","bugs":{"url":"https://github.com/MohamedAbidMiah/tiptap-react-render/issues"},"dist":{"shasum":"f3e76190685e6f8c9776d0e84f268567f5b3ae4a","tarball":"https://registry.npmjs.org/@abidmiah128/tiptap-react-render/-/tiptap-react-render-0.0.3.tgz","fileCount":24,"integrity":"sha512-OdR7Q2uco9hmiCzfx56PJWU5vw9NaErR83/d1PwWk/mm4WP1yCIHNBgxXvb/JoJlA8fw1vVNQjpwKafL1v40aQ==","signatures":[{"sig":"MEQCIDMnjj5VaS2krFxDes6EoWVYiAtwuiRoLz0evnmx0kDFAiB907YQahMl2w/uchtLasPXHCFRBFPCJ2GHDA3RRi4fug==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":385557},"main":"dist/cjs/index.js","types":"dist/index.d.ts","module":"dist/esm/index.js","gitHead":"68287f5e290ed0a6f399556a28520284b2ebedde","scripts":{"test":"jest","rollup":"rollup -c"},"_npmUser":{"name":"abidmiah128","email":"sagemanofficial@gmail.com"},"repository":{"url":"git+https://github.com/MohamedAbidMiah/tiptap-react-render.git","type":"git"},"_npmVersion":"9.8.0","description":"Render TipTap JSON in React without the editor!","directories":{},"_nodeVersion":"22.15.1","dependencies":{"react-dom":"^19.1.0","jest-environment-jsdom":"^29.7.0"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^29.7.0","react":"^19.1.0","tslib":"^2.8.1","rollup":"^2.79.2","ts-node":"^10.9.2","babel-jest":"^29.7.0","typescript":"^4.9.5","@babel/core":"^7.27.1","@types/jest":"^29.5.14","@types/node":"^22.15.18","@types/react":"^19.1.4","@types/react-dom":"^19.1.5","@babel/preset-env":"^7.27.2","rollup-plugin-dts":"^4.2.3","@babel/preset-react":"^7.27.1","@testing-library/react":"^16.3.0","@rollup/plugin-commonjs":"^21.1.0","@babel/preset-typescript":"^7.27.1","@rollup/plugin-typescript":"^8.5.0","@testing-library/jest-dom":"^6.6.3","@rollup/plugin-node-resolve":"^13.3.0"},"_npmOperationalInternal":{"tmp":"tmp/tiptap-react-render_0.0.3_1747656600240_0.5908219525774385","host":"s3://npm-registry-packages-npm-production"}},"0.0.4":{"name":"@abidmiah128/tiptap-react-render","version":"0.0.4","description":"Render TipTap JSON in React without the editor!","scripts":{"rollup":"rollup -c","test":"jest"},"author":{"name":"troop.com"},"license":"MIT","devDependencies":{"@babel/core":"^7.27.1","@babel/preset-env":"^7.27.2","@babel/preset-react":"^7.27.1","@babel/preset-typescript":"^7.27.1","@rollup/plugin-commonjs":"^21.1.0","@rollup/plugin-node-resolve":"^13.3.0","@rollup/plugin-typescript":"^8.5.0","@testing-library/jest-dom":"^6.6.3","@testing-library/react":"^16.3.0","@types/jest":"^29.5.14","@types/node":"^22.15.18","@types/react":"^19.1.4","@types/react-dom":"^19.1.5","babel-jest":"^29.7.0","jest":"^29.7.0","react":"^19.1.0","rollup":"^2.79.2","rollup-plugin-dts":"^4.2.3","ts-node":"^10.9.2","tslib":"^2.8.1","typescript":"^4.9.5"},"main":"dist/cjs/index.js","module":"dist/esm/index.js","types":"dist/index.d.ts","repository":{"type":"git","url":"git+https://github.com/MohamedAbidMiah/tiptap-react-render.git"},"dependencies":{"jest-environment-jsdom":"^29.7.0","react-dom":"^19.1.0"},"_id":"@abidmiah128/tiptap-react-render@0.0.4","gitHead":"5edc9391e2365a4afd8eba41cfb7223859b90a38","bugs":{"url":"https://github.com/MohamedAbidMiah/tiptap-react-render/issues"},"homepage":"https://github.com/MohamedAbidMiah/tiptap-react-render#readme","_nodeVersion":"22.15.1","_npmVersion":"9.8.0","dist":{"integrity":"sha512-Ms6qX+DTrdms9FkjRpwwq5oyTQRVi8Gb7C2rnznZmAqd5Hs4PKCk/V9VkDkQweYmX/iqP9Xm9R8GSRtbOeXmTg==","shasum":"0a90a528d9e37a71c5472c1b0e098ffe4fe75ef4","tarball":"https://registry.npmjs.org/@abidmiah128/tiptap-react-render/-/tiptap-react-render-0.0.4.tgz","fileCount":24,"unpackedSize":385758,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCxEiYHXrSg0gJQ1mmf9s4WjObVzxyAWDZcIlY0tJDaZwIgE14nii+psb6oX4XldjRZ+f6FJmd66TfZuT/pWba8lqk="}]},"_npmUser":{"name":"abidmiah128","email":"sagemanofficial@gmail.com"},"directories":{},"maintainers":[{"name":"abidmiah128","email":"sagemanofficial@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/tiptap-react-render_0.0.4_1747657109107_0.12160365179492838"},"_hasShrinkwrap":false}},"time":{"created":"2025-05-18T20:32:43.397Z","modified":"2025-05-19T12:18:29.871Z","0.0.2":"2025-05-18T20:32:43.714Z","0.0.3":"2025-05-19T12:10:00.440Z","0.0.4":"2025-05-19T12:18:29.285Z"},"bugs":{"url":"https://github.com/MohamedAbidMiah/tiptap-react-render/issues"},"author":{"name":"troop.com"},"license":"MIT","homepage":"https://github.com/MohamedAbidMiah/tiptap-react-render#readme","repository":{"type":"git","url":"git+https://github.com/MohamedAbidMiah/tiptap-react-render.git"},"description":"Render TipTap JSON in React without the editor!","maintainers":[{"name":"abidmiah128","email":"sagemanofficial@gmail.com"}],"readme":"# TipTap React Render\r\n\r\n[![npm](https://img.shields.io/npm/v/@abidmiah128/tiptap-react-render.svg?style=flat)](https://www.npmjs.com/package/@abidmiah128/tiptap-react-render)\r\n[![npm](https://img.shields.io/npm/dt/@abidmiah128/tiptap-react-render)](https://www.npmjs.com/package/@abidmiah128/tiptap-react-render)\r\n\r\nThis is a fork from the original libary [@troop.com/tiptap-react-render](https://www.npmjs.com/package/@troop.com/tiptap-react-render). Dependency and build updated to support next 15 and react 19.\r\n\r\nThis library renders [TipTap](https://tiptap.dev/) JSON payloads in React clients without embedding the editor.\r\n\r\n### Installation\r\n\r\n```sh\r\n# npm\r\nnpm install @abidmiah128/tiptap-react-render\r\n\r\n# yarn\r\nyarn add @abidmiah128/tiptap-react-render\r\n```\r\n\r\n### Usage\r\n\r\n```typescript\r\n// handle the document\r\nconst doc: NodeHandler = (props) => <>{props.children}</>;\r\n\r\n// handle a paragraph\r\nconst paragraph: NodeHandler = (props) => {\r\n  return <p style={props.node.attrs}>{props.children}</p>;\r\n};\r\n\r\n// handle text\r\nconst text: NodeHandler = (props) => {\r\n  const { node } = props;\r\n  let content = <span>{node.text}</span>;\r\n\r\n  return content;\r\n};\r\n// handle an image\r\nconst img: NodeHandler = (props) => {\r\n  const { src, alt, title } = props.node;\r\n  return <img src={src} alt={alt} title={title} />;\r\n};\r\n\r\n// create a handlers wrapper\r\nconst handlers: NodeHandlers = {\r\n  doc: doc,\r\n  text: text,\r\n  paragraph: paragraph,\r\n  img: img,\r\n};\r\n\r\n// sample tip tap data\r\nconst data = {\r\n  type: 'doc',\r\n  content: [\r\n    {\r\n      type: 'paragraph',\r\n      content: [\r\n        {\r\n          type: 'text',\r\n          text: 'Hey, try to select some text here. There will popup a menu for selecting some inline styles. Remember: you have full control about content and styling of this menu.',\r\n        },\r\n      ],\r\n    },\r\n  ],\r\n};\r\n// render it!\r\nconst rendered = <TipTapRender handlers={handlers} node={data} />;\r\n```\r\n\r\n### Why?\r\n\r\nMany 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!\r\n\r\nWe were inspired by Contentful's [rich-text-react-renderer](https://github.com/contentful/rich-text/tree/master/packages/rich-text-react-renderer) tool, so we built a similar one for TipTap payloads!\r\n\r\nThis repo was scaffolded using the [@alexeagleson/template-react-component-library](https://github.com/alexeagleson/template-react-component-library)\r\n","readmeFilename":"readme.md"}