README.md

React Native Jumbo HTML 🐘

Render HTML tags as React Native components.

Features

• Supports custom renderers for tags
• Supports inline styles in HTML
• Supports StyleSheet object with tag and class name based styles
• Inbuilt renderers for various tags including images, iframes, list items etc.

Installation

yarn add react-native-jumbo-html

API

HTMLRenderer

React component which takes an HTML string and renders it as React Native components.

Props

• html - string containing the HTML to render
• mappings - an object with mappings for tags to React components
• sheet - an object with a style sheet, they keys can be tag name or class name selectors

Each component in the mappings object will receive the following props:

• tagName - name of the tag that's being rendered
• classList - an array with the list of class names on the tag
• attrs - an object with all the attributes of the tag
• style - styles for the component
• children - children elements for the component

Example

For quick working demo, use Expo app to preview the example: https://expo.io/@usrbowe2/jumbo-html

import * as React from 'react';
import { StyleSheet } from 'react-native';
import { HTMLRenderer } from 'react-native-jumbo-html';
import CustomImage from './CustomImage';

const html = `
  <p>Hello world</p>
`;

const mappings = {
  img: CustomImage
};

export default function App() {
  return (
    <HTMLRenderer
      html={html}
      sheet={styles}
      mappings={mappings}
    />
  );
}

const styles = StyleSheet.create({
  a: {
    color: 'blue'
  },
  '.red': {
    color: 'red'
  }
});

RendererMappings

The default list of mappings. You can reuse the mappings when adding additional functionality and don't have to re-implement the components.

Contributing

While developing, you can run the example app to test your changes.

Make sure your code passes Flow and ESLint. Run the following to verify:

yarn run flow
yarn run lint

To fix formatting errors, run the following:

yarn run lint -- --fix

Remember to add tests for your change if possible.