New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More

@fintables/react-native-editorjs-viewer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@fintables/react-native-editorjs-viewer

A React Native component for rendering Editor.js content, supporting various block types with customizable styling.


Version published
Maintainers
0
Created

React Native Editor.js Viewer

React Native Editor.js Viewer is a powerful and flexible component for rendering Editor.js content in React Native applications. This library provides a seamless way to display rich, structured content created with Editor.js in your mobile apps, maintaining the look and feel of the original content while adapting it for mobile interfaces.

Key features include:

  • Support for a wide range of Editor.js block types
  • Customizable styling for each block type
  • Fallback component for handling unsupported blocks
  • Responsive design optimized for mobile devices
  • Easy integration with existing React Native projects

Whether you're building a content-rich app, a mobile blog reader, or any application that needs to display structured content, React Native Editor.js Viewer offers a robust solution for rendering Editor.js output in your React Native environment.

Installation

npm install @fintables/react-native-editorjs-viewer

Usage

import EditorJsViewer from '@fintables/react-native-editorjs-viewer';

// ...

const App = () => {
  return (
    <ScrollView showsVerticalScrollIndicator={false}>
      <EditorJsViewer
        data={editorJsData}
        showFallback={true}
        style={styles.editorJsContainer}
      />
    </ScrollView>
  );
};

Features

  • Supports various Editor.js block types
  • Customizable styles for each component
  • Fallback component for unsupported block types
  • Responsive design for mobile applications

Supported Block Types

  • Paragraph
  • Header
  • Delimiter
  • Image
  • Link Tool
  • Quote
  • List (ordered and unordered)
  • Table
  • Warning
  • Checklist
  • Code
  • Raw HTML

Customization

You can customize the appearance of each component by passing style props:

<EditorJsViewer
  data={editorJsData}
  componentStyles={{
    paragraph: {
      textStyle: { fontSize: 16, color: '#333' },
    },
    // ... other component styles
  }}
  componentProps={{
    code: {
      showLineNumbers: true,
    },
    // ... other component props
  }}
/>

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT


Made with create-react-native-library

FAQs

Package last updated on 09 Oct 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts