# @react-native-html/node-parser

> Using htmlparser2 to parse the nodes

Latest version **0.0.3** (published 2020-04-14) · MIT license · 0 weekly downloads

## Install

```sh
npm install @react-native-html/node-parser
pnpm add @react-native-html/node-parser
yarn add @react-native-html/node-parser
bun add @react-native-html/node-parser
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.3 |
| Published | 2020-04-14 |
| First published | 2020-04-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 13.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Derk Nolte |
| Maintainers | dpnolte |

## Links

- npm: https://www.npmjs.com/package/@react-native-html/node-parser
- npm.io page: https://npm.io/package/@react-native-html/node-parser

## Dependencies (1)

- [htmlparser2](https://npm.io/package/htmlparser2.md) ^4.1.0

## Recent versions

- 0.0.3 (latest) — 2020-04-14
- 0.0.2 — 2020-04-08
- 0.0.1 — 2020-04-05

## README

# react-native-html

## install

`yarn add @react-native-html/parser @react-native-html/renderer`

## basic example (typescript)

```
import React, { useRef, useState } from 'react';
import { SafeAreaView, StyleSheet, ScrollView } from 'react-native';
import { HtmlParseAndView, HtmlParseAndViewProps, HtmlStyles } from '@react-native-html/renderer';

const rawHtml = `<div>
  <ul id="top">
    <li>top</li>
    <li><a href="#bottom">go to bottom</a></li>
  </ul>
  <p>Hello, how are you?</p>
  <div id="bottom">bottom</div>`
  <a href="#top">go to top</a>
</div>
`;

export const Example = ({ rawHtml, htmlViewProps, children }: Props) => {
  const scrollRef = useRef<ScrollView | null>(null);

  return (
    <SafeAreaView>
      {children}
      <ScrollView
        ref={instance => {
          setHasScrollViewRef(true);
          scrollRef.current = instance;
        }}
      >
          <HtmlParseAndView
            rawHtml={rawHtml}
            htmlStyles={htmlStyles}
            containerStyle={styles.container}
            scrollRef={scrollRef.current}
            // eslint-disable-next-line react/jsx-props-no-spreading
            {...htmlViewProps}
          />
        )}
      </ScrollView>
    </SafeAreaView>
  );
};

const htmlStyles: HtmlStyles = {
  text: {
    fontSize: 18,
    lineHeight: 18 * 1.4,
  },
  paragraph: {
    marginVertical: 10,
  },
  image: {
    marginVertical: 0,
  },
  list: {
    marginVertical: 5,
  },
  h1: {
    fontSize: 30,
    lineHeight: 30 * 1.4,
    marginTop: 10,
    fontWeight: '500',
  },
  h2: {
    fontSize: 26,
    lineHeight: 26 * 1.4,
    marginTop: 10,
    fontWeight: '500',
  },
  h3: {
    fontSize: 24,
    lineHeight: 24 * 1.4,
    marginTop: 10,
    fontWeight: '500',
  },
  listItem: {
    marginVertical: 2,
  },
  listItemContent: {},
};

const styles = StyleSheet.create({
  container: {
    marginHorizontal: 10,
  },
});
```

## more examples

See example app for more examples

## why?

Other packages exist but:

- minimizing the number of views needed to display the html (not every dom element is a view)
- more control on what gets wrapped inside a <Text /> component
- parsing white spaces as per html specs
- separated parsing and rendering of html enables to cache parsing and/or move parsing to backend (e.g., node-parser)
- support for inline links within html

---
_Source: https://npm.io/package/@react-native-html/node-parser · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._