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 (about 10 years ago)
- Default Branch: master
- Last Pushed: 2024-08-12T06:27:00.000Z (11 months ago)
- Last Synced: 2024-10-30T08:51:27.484Z (8 months ago)
- Language: JavaScript
- Size: 88.9 KB
- Stars: 190
- Watchers: 6
- Forks: 115
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# html-to-react [](https://travis-ci.org/mikenikles/html-to-react) [](http://badge.fury.io/js/html-to-react) [](https://david-dm.org/mikenikles/html-to-react) [](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`