# @busfor/react-native-html-to-native > Create customizable React Native views from HTML markup Latest version **1.2.1** (published 2020-06-01) · MIT license · 0 weekly downloads ## Install ```sh npm install @busfor/react-native-html-to-native pnpm add @busfor/react-native-html-to-native yarn add @busfor/react-native-html-to-native bun add @busfor/react-native-html-to-native ``` ## Health **Score 20/100 (F)** — status: abandoned. Positive: has types; no vulnerabilities. Warnings: low downloads; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.2.1 | | Published | 2020-06-01 | | First published | 2020-04-16 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | CommonJS | | Dependencies | 4 | | Unpacked size | 120 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Author | Ivan Sokolovskii | | Maintainers | i.sokolovskii, sorokin0andrey | | Keywords | react-native, html, parser, render, renderer, parse | ## Links - npm: https://www.npmjs.com/package/@busfor/react-native-html-to-native - Repository: https://github.com/busfor/react-native-html-to-native - npm.io page: https://npm.io/package/@busfor/react-native-html-to-native ## Dependencies (4) - [domutils](https://npm.io/package/domutils.md) ^2.0.0 - [domhandler](https://npm.io/package/domhandler.md) ^3.0.0 - [domelementtype](https://npm.io/package/domelementtype.md) ^2.0.1 - [htmlparser2-without-node-native](https://npm.io/package/htmlparser2-without-node-native.md) ^3.9.2 ## Alternatives - [babylon](https://npm.io/package/babylon.md) — 5.1M weekly downloads - [csscolorparser](https://npm.io/package/csscolorparser.md) — 3.7M weekly downloads - [expr-eval-fork](https://npm.io/package/expr-eval-fork.md) — 1.5M weekly downloads - [@leeoniya/ufuzzy](https://npm.io/package/@leeoniya/ufuzzy.md) — 247.7K weekly downloads - [xml-parser](https://npm.io/package/xml-parser.md) — 78.4K weekly downloads ## Recent versions - 1.2.1 (latest) — 2020-06-01 - 1.2.0-rc.10 (next) — 2020-04-27 - 1.2.0 — 2020-05-19 - 1.2.0-rc.9 — 2020-04-24 - 1.2.0-rc.8 — 2020-04-24 - 1.2.0-rc.7 — 2020-04-23 - 1.2.0-rc.6 — 2020-04-23 - 1.2.0-rc.5 — 2020-04-23 - 1.2.0-rc.4 — 2020-04-23 - 1.2.0-rc.3 — 2020-04-22 - 1.2.0-rc.2 — 2020-04-22 - 1.2.0-rc.1 — 2020-04-22 - 1.2.0-rc.0 — 2020-04-22 - 1.1.0 — 2020-04-21 - 1.0.10 — 2020-04-20 - … 6 more at https://npm.io/package/@busfor/react-native-html-to-native/versions ## README # react-native-html-to-native ![npm](https://img.shields.io/npm/dw/@busfor/react-native-html-to-native?style=for-the-badge) [![npm (tag)](https://img.shields.io/npm/v/@busfor/react-native-html-to-native/latest?style=for-the-badge)](https://www.npmjs.com/package/@busfor/react-native-html-to-native) ![](https://img.shields.io/npm/types/typescript?style=for-the-badge) 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 ```javascript import { HTMLView } from '@busfor/react-native-html-to-native' ``` ```jsx console.log(url)} onError={(err) => console.log(err)} styles={styles} renderers={{ 'a.link': (renderedChildren, style, props) => { return ( console.log('Clicked', props.attributes.href)} style={style}> {renderedChildren} ) }, }} html={'

Paragraph

'} 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** ## Default renderers Some HTML tags are rendered by default, some are skipped while rendering. To know how HTML tags are rendered and how to use **ElementRenderer** functions see [default renderers](src/defaults/renderers.tsx) ## Default styles Some default styles for tags could be specified in this library To see what styles are default for tags see [default styles](src/defaults/styles.ts) # Issues and contributing Feel free to report any bug or request any functionality you would like to be done with [Open Issue](https://github.com/busfor/react-native-html-to-native/issues/new) functionality of GitHub Also feel free to fork and contribute by opening [Pull Request](https://github.com/busfor/react-native-html-to-native/compare). All pull requests will be reviewed and merged if everything is OK! # TODO: ⬜️ Improve CSS selectors ⬜️ Complete example app ⬜️ Add HTML parsing from URL --- _Source: https://npm.io/package/@busfor/react-native-html-to-native · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._