Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .travis.yml
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ node_js:
- 8

env:
- REACT_VERSION=next # 16 beta
- REACT_VERSION=16
- REACT_VERSION=15

script:
Expand Down
19 changes: 18 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ yarn add react-html-parser

```javascript
import React from 'react';
import ReactHtmlParser from 'react-html-parser';
import ReactHtmlParser, { processNodes, convertNodeToElement, htmlparser2 } from 'react-html-parser';

class HtmlComponent extends React.Component {
render() {
Expand All @@ -45,6 +45,7 @@ import ReactHtmlParser from 'react-html-parser';
- `options`: Options object
- decodeEntities=true *(boolean)*: Whether to decode html entities (defaults to true)
- transform *(function)*: Transform function that is applied to every node
- preprocessNodes *(function)*: Pre-process the nodes generated by `htmlparser2`

#### Transform Function
The transform function will be called for every node that is parsed by the library.
Expand Down Expand Up @@ -86,6 +87,16 @@ function transform(node) {
}
```

#### preprocessNodes Function
Allows pre-processing the nodes generated from the html by `htmlparser2` before being passed to the library and converted to React elements.

`function preprocessNodes(nodes)`
##### Arguments
- `nodes`: The entire node tree generated by `htmlparser2`.

##### Return type
The `preprocessNodes` function should return a valid `htmlparser2` node tree.

### `function convertNodeToElement(node, index, transform)`
Processes a node and returns the React element to be rendered. This function can be used in conjunction with the previously described `transform` function to continue to process a node after modifying it.

Expand All @@ -108,3 +119,9 @@ function transform(node, index) {
}
}
```

### `htmlparser2`
The library exposes the `htmlparser2` library it uses. This allows consumers
to use it without having to add it as a separate dependency.

See https://github.com/fb55/htmlparser2 for full details.
32 changes: 16 additions & 16 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

8 changes: 6 additions & 2 deletions src/HtmlParser.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,11 @@ import processNodes from './processNodes';
* @param {Object} options Options to pass
* @returns {Array} List of top level React elements
*/
export default function HtmlParser(html, { decodeEntities=true, transform }={}) {
const nodes = htmlparser2.parseDOM(html, { decodeEntities });
export default function HtmlParser(html, {
decodeEntities = true,
transform,
preprocessNodes = nodes => nodes
}={}) {
const nodes = preprocessNodes(htmlparser2.parseDOM(html, { decodeEntities }));
return processNodes(nodes, transform);
}
3 changes: 3 additions & 0 deletions src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,3 +3,6 @@ export default HtmlParser;

export { default as processNodes } from './processNodes';
export { default as convertNodeToElement } from './convertNodeToElement';

// expose htmlparser2 so it can be used if required
export { default as htmlparser2 } from 'htmlparser2';
21 changes: 20 additions & 1 deletion test/integration/integration.spec.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from 'react';
import ReactDOMServer from 'react-dom/server';
import HtmlParser, { convertNodeToElement } from 'index';
import HtmlParser, { convertNodeToElement, htmlparser2 } from 'index';

const reactVersion = parseInt(require('react/package.json').version.match(/^(\d+)\./)[1], 10);

Expand Down Expand Up @@ -170,4 +170,23 @@ describe('Integration tests: ', () => {
);
});

it('should preprocess nodes correctly', () => {
test(
'<div>preprocess test</div>',
'<div>preprocess test</div><div>preprocess test</div>',
{
preprocessNodes(nodes) {
return [
...nodes,
...nodes
];
}
}
);
});

it('should expose htmlparser2', () => {
expect(htmlparser2).toBeDefined();
});

});
7 changes: 4 additions & 3 deletions test/unit/HtmlParser.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -22,10 +22,11 @@ describe('Testing: `HtmlParser`', () => {
});

it('should apply the options', () => {
const transform = function() {};
expect(HtmlParser('html', { decodeEntities:false, transform })).toBe('processed');
const transform = jasmine.createSpy('transform');
const preprocessNodes = jasmine.createSpy('preprocessNodes').and.callFake(v => `preprocessed ${v}`);
expect(HtmlParser('html', { decodeEntities:false, transform, preprocessNodes })).toBe('processed');
expect(htmlparser2.parseDOM).toHaveBeenCalledWith('html', {decodeEntities: false});
expect(processNodes).toHaveBeenCalledWith('parsed', transform);
expect(processNodes).toHaveBeenCalledWith('preprocessed parsed', transform);
});

});