@busfor/react-native-html-to-native NPM

react-native-html-to-native

Library for parsing HTML code into native iOS and Android components with CSS selector-like styling and rendering

Getting started

$ yarn add @busfor/react-native-html-to-native

Usage

import { HTMLView } from '@busfor/react-native-html-to-native'

<HTMLView
  onLinkPress={(url) => console.log(url)}
  onError={(err) => console.log(err)}
  styles={styles}
  renderers={{
    'a.link': (renderedChildren, style, props) => {
      return (
        <TouchableOpacity key={props.key} onPress={() => console.log('Clicked', props.attributes.href)} style={style}>
          {renderedChildren}
        </TouchableOpacity>
      )
    },
  }}
  html={'<div><p>Paragraph</p></div>'}
  onLoading={(loading) => console.log(loading)}
/>

Docs

Properties

Name	Description	Type
html*	Raw HTML code to be parsed and presented	string
renderers	HTML nodes render functions	Object
passProps	Custom props passed to node renderer	Object
styles	Custom node styles	Object
onError	Error callback function	Function
onLinkPress	Link press callback function	Function
parserOptions	Parser options, see ParserOptions type	ParserOptions
onLoading	Loading state callback, only parameter is loadingState of type boolean	Function
renderLoading	Function to render custom loading indicator	Function

* - required property

Types

ParserOptions

Option	Description	Type	Default
normalizeWhitespace	Indicates whether whitespace in text nodes should be normalized	boolean	false
recognizeSelfClosing	Recognize self-closing HTML tags	boolean	true
decodeEntities	If set to true, entities within HTML code will be decoded	boolean	true

ElementRenderer - function for rendering html nodes as native elements

(renderedChildren: Array\, style: StyleProp\, props: ElementProps) => ReactNode

Function accepts rendered node's children, node's style and props

Should return ReactNode

For more see Default renderers

ElementProps - props of rendering HTML node

Name	Description	Type
attributes	HTML tag attributes	Object or undefined
passProps	Custom props passed to component render from HTMLView	Object
handleLinkPress	Link press handler function	Function
node	HTML node for which element is rendered	Node
children	Node's children array	Array\
siblings	Node's siblings array	Array\
parent	Node's parent	Node
data	Text data for text nodes	string
key	Unique key for component rendering	string

Selectors

Selectors system built in a CSS-like manner

To select element by tag name just use it as is: ol, p, etc.

For selecting by class or id use .class and #id. For more specific selection of component with class(same for component with id) use it like: p.class

Also it is possible to select HTML node by path like ol>li or ol.class>li#id etc.

Some HTML node have custom selectors. Text nodes are rendered as React Native \ components and can be accessed by TextNode selector. Same for list items indicators nodes - access it by IndicatorNode selector.

For more examples of using selectors see Usage, Example app and Default renderers and styles