Skip to content

Commit

Permalink
Add options argument to ReactHtmlParser function
Browse files Browse the repository at this point in the history
  • Loading branch information
peternewnham committed Aug 9, 2017
1 parent 160f206 commit 2b468f6
Show file tree
Hide file tree
Showing 9 changed files with 92 additions and 11 deletions.
3 changes: 2 additions & 1 deletion .babelrc
Expand Up @@ -4,6 +4,7 @@
"es2015"
],
"plugins": [
"transform-object-assign"
"transform-object-assign",
"transform-object-rest-spread"
]
}
2 changes: 1 addition & 1 deletion .eslintrc
Expand Up @@ -5,7 +5,7 @@
"sourceType": "module",
"ecmaFeatures": {
"jsx": true,
"spread": true
"experimentalObjectRestSpread": true
}
},
"env": {
Expand Down
25 changes: 25 additions & 0 deletions CHANGELOG.md
@@ -0,0 +1,25 @@
# Change Log

## v2.0.0
### Breaking Changes
- ReactHtmlParser now decodes html entities by default
### Updates
- Add React v16 as a peer dependency
- Added options parameter to ReactHtmlParser function with `decodeEntities` option (default true)

## v1.0.3
### Updates
- Added React v15 as a peer dependency
### Bug Fixes
- Match boolean attributes when defined with upper or lower case characters (#5)

## v1.0.2
### Bug Fixes
- Don't add children to void elements such as img or br (#1)
- Correctly render boolean attributes - disabled, checked, etc (#3)

## v1.0.0
### Initial Release
- Render HTML elements and text
- Map HTML attribute names to React HTML prop names
- Convert inline style strings to React style object format
17 changes: 15 additions & 2 deletions README.md
Expand Up @@ -24,7 +24,20 @@ import ReactHtmlParser from 'react-html-parser';
class HtmlComponent extends React.Component {
render() {
const html = '<div>Example HTML string</div>';
return <div>{ ReactHtmlParser(html) }</div>;
const options = {
decodeEntities: true
};
return <div>{ ReactHtmlParser(html, options) }</div>;
}
}
```
```

## API

### `ReactHtmlParser(html, [options])`
Takes an HTML string and returns equivalent React elements

**Arguments**
- html: The HTML string to parse
- options: Options object
- decodeEntities=true *(boolean)*: Whether to decode html entities (defaults to true)
16 changes: 16 additions & 0 deletions package-lock.json

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

1 change: 1 addition & 0 deletions package.json
Expand Up @@ -45,6 +45,7 @@
"babel-core": "^6.8.0",
"babel-loader": "^6.2.4",
"babel-plugin-transform-object-assign": "^6.8.0",
"babel-plugin-transform-object-rest-spread": "^6.23.0",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"coveralls": "^2.11.9",
Expand Down
11 changes: 8 additions & 3 deletions src/HtmlParser.js
Expand Up @@ -4,10 +4,15 @@ import ProcessNodes from './utils/ProcessNodes';
/**
* Parses a HTML string and returns a list of React components generated from it
*
* @param {String} html The HTML to convert into React components
* @param {String} html The HTML to convert into React component
* @param {Object} options Options to pass
* @returns {Array} List of top level React elements
*/
export default function HtmlParser(html) {
const nodes = htmlparser2.parseDOM(html, {decodeEntities: true});
export default function HtmlParser(html, options={}) {
options = {
decodeEntities: true,
...options
};
const nodes = htmlparser2.parseDOM(html, options);
return ProcessNodes(nodes);
}
20 changes: 17 additions & 3 deletions test/integration/integration.spec.js
Expand Up @@ -6,12 +6,12 @@ const reactVersion = parseInt(require('react/package.json').version.match(/^(\d+

class HtmlParserComponent extends React.Component {
render() {
return <div>{HtmlParser(this.props.html)}</div>;
return <div>{HtmlParser(this.props.html, this.props.options)}</div>;
}
}

const test = function(html, override=null) {
const actual = ReactDOMServer.renderToStaticMarkup(<HtmlParserComponent html={html} />);
const test = function(html, override=null, options={}) {
const actual = ReactDOMServer.renderToStaticMarkup(<HtmlParserComponent html={html} options={options} />);
const expected = `<div>${override === null && html || override}</div>`;
expect(actual).toBe(expected);
};
Expand Down Expand Up @@ -90,4 +90,18 @@ describe('Integration tests: ', () => {
test('<input disabled="disabled">', '<input disabled=""/>');
});

it('should decode html entities by default', () => {
test('<span>&excl;</span>', '<span>!</span>');
});

it('should not decode html entities when the option is disabled', () => {
test(
'<span>&excl;</span>',
'<span>&amp;excl;</span>',
{
decodeEntities: false
}
);
});

});
8 changes: 7 additions & 1 deletion test/unit/HtmlParser.spec.js
Expand Up @@ -15,10 +15,16 @@ describe('Testing: `HtmlParser`', () => {
htmlparser2.parseDOM.calls.reset();
});

it('should parse the html string and process the resulting nodes', () => {
it('should parse the html string and process the resulting nodes with default options', () => {
expect(HtmlParser('html')).toBe('processed');
expect(htmlparser2.parseDOM).toHaveBeenCalledWith('html', {decodeEntities: true});
expect(ProcessNodes).toHaveBeenCalledWith('parsed');
});

it('should allow decodeEntities option to be changed', () => {
expect(HtmlParser('html', { decodeEntities:false })).toBe('processed');
expect(htmlparser2.parseDOM).toHaveBeenCalledWith('html', {decodeEntities: false});
expect(ProcessNodes).toHaveBeenCalledWith('parsed');
});

});

0 comments on commit 2b468f6

Please sign in to comment.