https://github.com/mikenikles/html-to-react

A lightweight library that converts raw HTML to a React DOM structure.
https://github.com/mikenikles/html-to-react

Last synced: 3 months ago
JSON representation

A lightweight library that converts raw HTML to a React DOM structure.

• Host: GitHub
• URL: https://github.com/mikenikles/html-to-react
• Owner: mikenikles
• License: mit
• Archived: true
• Created: 2015-06-20T05:20:03.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2024-07-29T10:54:55.000Z (6 months ago)
• Last Synced: 2024-08-01T16:38:41.479Z (6 months ago)
• Language: JavaScript
• Size: 88.9 KB
• Stars: 190
• Watchers: 6
• Forks: 116
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# html-to-react [![Build Status](https://travis-ci.org/mikenikles/html-to-react.svg?branch=master)](https://travis-ci.org/mikenikles/html-to-react) [![npm version](https://badge.fury.io/js/html-to-react.svg)](http://badge.fury.io/js/html-to-react) [![Dependency Status](https://david-dm.org/mikenikles/html-to-react.svg)](https://david-dm.org/mikenikles/html-to-react) [![Coverage Status](https://coveralls.io/repos/mikenikles/html-to-react/badge.svg?branch=master)](https://coveralls.io/r/mikenikles/html-to-react?branch=master)

A lightweight library that converts raw HTML to a React DOM structure.

## Project Moved

As part of [#43](https://github.com/mikenikles/html-to-react/issues/43), this project moved to https://github.com/aknuds1/html-to-react. Please file any issues or PRs at the new location.

## Why?

I had a scenario where an HTML template was generated by a different team, yet I wanted to leverage React for the parts

I did have control over. The template basically contains something like:

```



    


        


          

        

    

    


        


          

        

    



```


I had to replace each `
` that contains a `data-report-id` attribute with an actual report, which was nothing more

than a React component.


Simply replacing the `
` elements with a React component would end up with multiple top-level React components

that have no common parent.


The **html-to-react** module solves this problem by parsing each DOM element and converting it to a React tree with one

single parent.

## Installation

`$ npm install --save html-to-react`

## Examples

### Simple

The following example parses each node and its attributes and returns a tree of React components.

```javascript

var React = require('react');

var HtmlToReact = new require('html-to-react');

var htmlInput = '


Title

A paragraph

';

var htmlToReactParser = new HtmlToReact.Parser(React);

var reactComponent = htmlToReactParser.parse(htmlInput);

var reactHtml = React.renderToStaticMarkup(reactComponent);


assert.equal(reactHtml, htmlInput); // true

```

### With custom processing instructions

If certain DOM nodes require specific processing, for example if you want to capitalize each `
` tag, the following

example demonstrates this:


```javascript

var React = require('react');

var HtmlToReact = new require('html-to-react');

var htmlInput = '


Title

Paragraph

Another title

';

var htmlExpected = '


TITLE

Paragraph

ANOTHER TITLE

';


var isValidNode = function() {

    return true;

};

// Order matters. Instructions are processed in the order they're defined

var processNodeDefinitions = new HtmlToReact.ProcessNodeDefinitions(React);

var processingInstructions = [

    {

        // Custom 
 processing

        shouldProcessNode: function(node) {

            return node.parent && node.parent.name && node.parent.name === 'h1';

        },

        processNode: function(node, children) {

            return node.data.toUpperCase();

        }

    }, {

        // Anything else

        shouldProcessNode: function(node) {

            return true;

        },

        processNode: processNodeDefinitions.processDefaultNode

    }];

var htmlToReactParser = new HtmlToReact.Parser(React);

var reactComponent = htmlToReactParser.parseWithInstructions(htmlInput, isValidNode, processingInstructions);

var reactHtml = React.renderToStaticMarkup(reactComponent);

assert.equal(reactHtml, htmlExpected);

```


## Tests & Coverage

`$ npm run test-locally`

`$ npm run test-html-coverage`