Skip to content

Tidy and reword README for readability and add contributors #21

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Aug 31, 2016
Merged

Tidy and reword README for readability and add contributors #21

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
75 changes: 55 additions & 20 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ The parser converts an HTML string to [React element(s)](https://facebook.github
```js
var Parser = require('html-react-parser');
var reactElement = (
Parser('<p>Hello, world!</p>') // equivalent to `React.createElement('p', {}, 'Hello, world!')`
Parser('<p>Hello, world!</p>') // same as `React.createElement('p', {}, 'Hello, world!')`
);
require('react-dom').render(reactElement, document.getElementById('root'));
```
Expand Down Expand Up @@ -72,8 +72,7 @@ ReactDOM.render(

The `replace` method allows you to swap an element with your own React element.

The method has 1 parameter:
1. `domNode`: An object which shares the same schema as the output from [htmlparser2.parseDOM](https://github.com/fb55/domhandler#example).
The first argument is `domNode`, which is an object which shares the same schema as the output from [htmlparser2.parseDOM](https://github.com/fb55/domhandler#example).

```js
Parser('<p id="replace">text</p>', {
Expand All @@ -94,52 +93,78 @@ Parser('<p id="replace">text</p>', {
});
```

Working example:
Simple example:

```js
var Parser = require('html-react-parser');
var React = require('react');

var html = '<div><p id="main">replace me</p></div>';
var html = (
'<div>' +
'<p id="replace">'
'replace me' +
'</p>' +
'</div>'
);

var reactElement = Parser(html, {
replace: function(domNode) {
if (domNode.attribs && domNode.attribs.id === 'main') {
if (domNode.attribs && domNode.attribs.id === 'replace') {
return React.createElement('span', {
style: { fontSize: '42px' } },
'replaced!');
style: { fontSize: '42px' }
}, 'replaced!');
// equivalent jsx syntax:
// return <span style={{ fontSize: '42px' }}>replaced!</span>;
}
}
});

require('react-dom').render(reactElement, document.getElementById('root'));
// <div><span style="font-size: 42px;">replaced!</span></div>
require('react-dom').render(
reactElement,
document.getElementById('root')
);
// <div>
// <span style="font-size: 42px;">
// replaced!
// </span>
// </div>
```

Advanced usage with replace, keeping children (useful if child elements also needs to be replaced or just kept):
Advanced example (the replaced element's children are kept):

```js
var Parser = require('html-react-parser');
var domToReact = require('html-react-parser/lib/dom-to-react'); // used for recursively parsing DOM created from the HTML
var React = require('react');

var html = '<div><p id="main"><span class="prettify">keep me and make me pretty!</span></p></div>';
// used for recursively parsing DOM created from the HTML
var domToReact = require('html-react-parser/lib/dom-to-react');

var html = (
'<div>' +
'<p id="main">' +
'<span class="prettify">' +
'keep me and make me pretty!' +
'</span>' +
'</p>' +
'</div>'
);

var parserConfig = {
replace: function(domNode) {
var parsedChildren;
if (domNode.attribs) {
if (domNode.attribs.id === 'main') {
parsedChildren = domToReact(domNode.children, parserConfig); // continue parsing domNode's children with same config
// continue parsing domNode's children with same config
parsedChildren = domToReact(domNode.children, parserConfig);
return React.createElement('span', {
style: { fontSize: '42px' }
}, parsedChildren);
// equivalent jsx syntax:
// return <span style={{ fontSize: '42px' }}>{parsedChildren}</span>;

} else if (domNode.attribs.class === 'prettify') {
parsedChildren = domToReact(domNode.children, parserConfig); // continue parsing domNode's children with same config
// continue parsing domNode's children with same config
parsedChildren = domToReact(domNode.children, parserConfig);
return React.createElement('span', {
style: { color: 'hotpink' }
}, parsedChildren);
Expand All @@ -150,21 +175,31 @@ var parserConfig = {
}
};

var reactElement = Parser(html, parserConfig);

require('react-dom').render(reactElement, document.getElementById('root'));
// <div><span style="font-size: 42px;"><span class="prettify" style="color: hotpink;">keep me and make me pretty!</span></span></div>
require('react-dom').render(
Parser(html, parserConfig),
document.getElementById('root')
);
// <div>
// <span style="font-size: 42px;">
// <span class="prettify" style="color: hotpink;">
// keep me and make me pretty!
// </span>
// </span>
// </div>
```

## Testing

```sh
$ npm test
$ npm run lint
```

## Special Thanks

To [benox3](https://github.com/benox3) and [tdlm](https://github.com/tdlm) for their feedback and review.
- To [htmlparser2](https://github.com/fb55/htmlparser2).
- To all the [contributors](https://github.com/remarkablemark/html-react-parser/graphs/contributors).
- To [benox3](https://github.com/benox3) and [tdlm](https://github.com/tdlm) for their feedback and review.

## License

Expand Down