{"id":13770640,"url":"https://github.com/Hidekih/editorjs-viewer-native","last_synced_at":"2025-05-11T03:32:51.047Z","repository":{"id":65299771,"uuid":"584252641","full_name":"Hidekih/editorjs-viewer-native","owner":"Hidekih","description":"A React Native solution to parse outputData generated by EditorJs.","archived":false,"fork":false,"pushed_at":"2023-06-16T13:16:58.000Z","size":2978,"stargazers_count":47,"open_issues_count":4,"forks_count":3,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-08T17:52:11.816Z","etag":null,"topics":["editorjs","react-native","typescript"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/editorjs-viewer-native","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Hidekih.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2023-01-02T02:08:48.000Z","updated_at":"2025-03-18T08:51:51.000Z","dependencies_parsed_at":"2024-01-06T20:55:13.835Z","dependency_job_id":null,"html_url":"https://github.com/Hidekih/editorjs-viewer-native","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Hidekih%2Feditorjs-viewer-native","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Hidekih%2Feditorjs-viewer-native/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Hidekih%2Feditorjs-viewer-native/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Hidekih%2Feditorjs-viewer-native/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Hidekih","download_url":"https://codeload.github.com/Hidekih/editorjs-viewer-native/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253514352,"owners_count":21920327,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["editorjs","react-native","typescript"],"created_at":"2024-08-03T17:00:40.140Z","updated_at":"2025-05-11T03:32:50.352Z","avatar_url":"https://github.com/Hidekih.png","language":"TypeScript","funding_links":[],"categories":["Libraries"],"sub_categories":["JavaScript"],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/Hidekih/editorjs-viewer-native/main/public/presentation_2.jpg\" alt=\"EditorJs native viewer presentation image\" /\u003e\n\u003c/p\u003e\n\n[![npm version](https://img.shields.io/npm/v/editorjs-viewer-native?style=flat-square)](https://badge.fury.io/js/editorjs-viewer-native)\n[![npm downloads](https://img.shields.io/npm/dm/editorjs-viewer-native.svg?style=flat-square)](https://npm-stat.com/charts.html?package=editorjs-viewer-native)\n\n# About\nThis lib provide a component to render in a React Native a JSON generated by [`Editor.js`](https://editorjs.io/)!\n\n## Installation\nVersion 1.0.0 is now available!\n```cmd\nnpm i editorjs-viewer-native\n```\nor\n```cmd\nyarn add editorjs-viewer-native\n```\n\n## Current support for editorJs's plugins:\n- [`Code`](https://github.com/editor-js/code)\n- [`Delimiter`](https://github.com/editor-js/delimiter)\n- [`Header`](https://github.com/editor-js/header)\n- [`Image`](https://github.com/editor-js/image)\n- [`Link`](https://github.com/editor-js/link)\n- [`List`](https://github.com/editor-js/list)\n- [`Marker`](https://github.com/editor-js/marker)\n- [`Paragraph`](https://github.com/editor-js/paragraph)\n- [`Personality`](https://github.com/editor-js/personality)\n- [`Quote`](https://github.com/editor-js/quote)\n- [`Simple Image`](https://github.com/editor-js/simple-image)\n- [`Underline`](https://github.com/editor-js/underline)\n- [`Custom block type`](#support-for-custom-blocks)\n\nSee the[` update plans`](#updates-plans)\n## Usage\nCreate a component using function `createEditorJsViewer`.\n\n```tsx\nimport { ScrollView } from 'react-native';\nimport { createEditorJsViewer } from \"editorjs-viewer-native\";\n\nimport dataFromEditorJs from \"./data.json\";\n\nconst EditorJsViewerNative = createEditorJsViewer();\n\nexport default function App() {\n  return (\n    \u003cScrollView\u003e\n      \u003cEditorJsViewerNative data={dataFromEditorJs} /\u003e\n    \u003c/ScrollView\u003e\n  );\n}\n```\n\n## Custom component for supported plugins\nIf you want to use your custom component to render **any** supported plugin block, you can define a Component in `createEditorJsViewer` config object.\n```tsx\nimport { ScrollView, Text } from 'react-native';\nimport { createEditorJsViewer, IHeaderProps } from \"editorjs-viewer-native\";\nimport dataFromEditorJs from \"./data.json\";\n\nconst MyHeader = ({ data }: IHeaderProps) =\u003e {\n  return \u003cText\u003e{data.text}\u003c/Text\u003e\n}\n\nconst EditorJsViewerNative = createEditorJsViewer({\n  tools: {                // Updated to \"tools\" in v1 (before was toolsParser)\n    header: {\n      Component: MyHeader // Updated to \"Component\" in v1 (before was CustomComponent)\n    }\n  }\n})\n\nexport default function App() {\n  return (\n    \u003cScrollView\u003e\n      \u003cEditorJsViewerNative data={dataFromEditorJs} /\u003e\n    \u003c/ScrollView\u003e\n  );\n}\n```\nNow the component `MyHeader` will render all data of type **header**.\n\n## Support for custom blocks\nIf you want to render a custom block type, you can define a `customTools` in `createEditorJsViewer` config object.\n```json\n// outputData.json\n{\n  \"blocks\": [\n    {\n      \"id\": \"customBlock_id2\",\n      \"type\" : \"randomColeredText\",\n      \"data\" : {\n        \"text\" : \"The color of this text is generated randomic\"\n      }\n    }\n  ]\n}\n```\n```tsx\nimport { ScrollView, Text } from 'react-native';\nimport { createEditorJsViewer, IHeaderProps, IComponentBlockProps } from \"editorjs-viewer-native\";\nimport dataFromEditorJs from \"./data.json\";\n\ninterface IRandomColeredTextData {\n  text: string;\n}\n\n// * Any component will receive \"data\" and \"containerStyle\"\n// * \"data\" contain the data of block\n// * \"containerStyle\" is a simple style to prevent margin top on first element or margin bottom on last component\nconst RandomColeredTextBlock = ({ block, containerStyle }: IComponentBlockProps\u003cIRandomColeredTextData\u003e) =\u003e {\n  const randomColor = `#${Math.floor(Math.random()*16777215).toString(16)}`;\n  return (\n    \u003cText style={[{ color: randomColor }, containerStyle]}\u003e{block.data.text}\u003c/Text\u003e\n  );\n};\n\nconst EditorJsViewerNative = createEditorJsViewer({\n  customTools: {\n    randomColeredText: { // Name of your custom block type\n      Component: RandomColeredTextBlock\n    }\n  }\n})\n\nexport default function App() {\n  return (\n    \u003cScrollView\u003e\n      \u003cEditorJsViewerNative data={dataFromEditorJs} /\u003e\n    \u003c/ScrollView\u003e\n  );\n}\n```\nNow the component `MyHeader` will render all data of type **header**.\n\n## Fallback for unsupported block types\nIf you want to show a message for unsupported blocks (good for test, bad for production) set `showBlockFallback` as true inside `createEditorJsViewer` config object.\n\n```tsx\nconst EditorJsViewerNative = createEditorJsViewer({\n  showBlockFallback: true // Update to \"showBlockFallback\" (before was unknownBlockFallback)\n})\n```\n\n## Updates plans\n### Support for:\n- [`Attaches`](https://github.com/editor-js/attaches)\n- [`Checklist`](https://github.com/editor-js/checklist)\n- [`Raw HTML`](https://github.com/editor-js/raw)\n- [`Table`](https://github.com/editor-js/table)\n\n## Open source\nFeel free to clone/fork this project!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FHidekih%2Feditorjs-viewer-native","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FHidekih%2Feditorjs-viewer-native","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FHidekih%2Feditorjs-viewer-native/lists"}