Repository files navigation

The EditorJS Renderer for React Native is a library that renders React Native components from the JSON generated byEditor.js. It supports basic Editor.js components right out of the box and also provides the flexibility to create custom components. Furthermore, the renderer offers built-in support for both light and dark modes.

To install the package via npm, run:

npm i@biblebites/editorjs-renderer-react-native

• Code
• Delimiter
• Header
• Image
• Simple Image
• Link
• List
• Marker
• Paragraph
• Personality
• Quote
• Underline
• Custom block type

Start by defining the EditorJS data with the typeEditorJSData (only the blocks are required). Next, define the config using theRendererConfig type; for more details, refer toconfig. After that, you can create theRenderer component—it's recommended to place it within a ScrollView. Additionally, you can pass anappearance to the renderer, eitherlight ordark, which will set the theme.

import{ScrollView}from'react-native';import{EditorJSData,Renderer,RendererConfig,RendererAppearance}from'@biblebites/editorjs-renderer-react-native';constdata:EditorJSData={blocks:[{id:"header-1",type:"header",data:{text:"Header 1",level:1,},}]};constconfig:RendererConfig={enableFallback:false};exportdefaultfunctionApp(){return(<><ScrollViewstyle={{backgroundColor:"white",padding:10}}><Rendererdata={data}config={config}appearance={RendererAppearance.light}/></ScrollView></>)}

TheRendererConfig type allows you to customize the rendering behavior of the EditorJS Renderer for React Native. Here's an overview of the config options:

exporttypeRendererConfig={components:{[key:string]:Component|undefined;header?:Component;bold?:Component;italic?:Component;mark?:Component;underline?:Component;paragraph?:Component;delimiter?:Component;linkTool?:Component;personality?:Component;quote?:Component;image?:Component;list?:Component;code?:Component;};enableFallback:boolean;};

The components field allows you to define custom components for specific Editor.js blocks. For each block type (such as header, bold, image, etc.), you can either provide a custom Component or leave it undefined. For example, you could create a custom React Native component to render a specific block type in your app.

When set totrue, enableFallback enables a fallback mechanism for unsupported blocks. If the renderer encounters a block it doesn’t recognize (e.g., a custom block added to your Editor.js setup), it will show a fallback UI. This is especially useful during development to identify unsupported blocks. However, it’s recommended to disable this in production.

To add a custom component, simply define the component and then reference it in the components field of the RendererConfig. For example, if you want to create a custom component for rendering athing block, you can do so as follows:

importReactfrom"react";import{Text,View}from"react-native";import{RendererComponentProps}from"@biblebites/editorjs-renderer-react-native";// Custom Thing ComponentconstThingComponent=(props:RendererComponentProps&{data:{text:string}})=>{return(<Textstyle={{fontStyle:'italic',color:'gray'}}>{props.data.text}</Text>);};// Define the RendererConfigconstconfig:RendererConfig={components:{thing:ThingComponent,},enableFallback:false,};

You can also modify the default components' styles or functionality. This is useful if you want to maintain the default behavior but just tweak the appearance or add some custom logic.

For instance, if you want to change the style of the defaultheader component, you can do so by defining it in the components field like this:

constconfig:RendererConfig={enableFallback:false,components:{header:(props:HeaderProps)=>(<Header{...props}style={{color:"blue"}}/>)}}

Take a look at the properties for each component in the codebase, because depending on the component you can customize alot about how it looks or behaves.

This project is a fork ofeditorjs-viewer-native by Hidekih.Feel free to clone/fork this project!