Skip to content

Commit a8de457

Browse files
Tidy README replace options and its simple example
Make instructions clearer; simplifying examples by removing unnecessary parts and rewriting them with ES6.
1 parent 5465d8f commit a8de457

File tree

1 file changed

+7
-50
lines changed

1 file changed

+7
-50
lines changed

README.md

Lines changed: 7 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -104,64 +104,21 @@ render(
104104

105105
#### replace(domNode)
106106

107-
The `replace` method allows you to swap an element with your own React element.
107+
The `replace` method allows you to swap an element with your own React Element.
108108

109-
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).
109+
The first argument is `domNode`, which is an object that has the same output as [htmlparser2.parseDOM](https://github.com/fb55/domhandler#example).
110110

111-
```js
112-
Parser('<p id="replace">text</p>', {
113-
replace: function(domNode) {
114-
console.log(domNode);
115-
// { type: 'tag',
116-
// name: 'p',
117-
// attribs: { id: 'replace' },
118-
// children: [],
119-
// next: null,
120-
// prev: null,
121-
// parent: null }
122-
123-
return;
124-
// element is not replaced because
125-
// a valid React element is not returned
126-
}
127-
});
128-
```
129-
130-
Simple example:
111+
The element is only replaced if a valid React Element is returned.
131112

132113
```js
133-
var Parser = require('html-react-parser');
134-
var React = require('react');
135-
136-
var html = (
137-
'<div>' +
138-
'<p id="replace">'
139-
'replace me' +
140-
'</p>' +
141-
'</div>'
142-
);
143-
144-
var reactElement = Parser(html, {
145-
replace: function(domNode) {
114+
// with JSX
115+
Parser('<p id="replace">text</p>', {
116+
replace: (domNode) => {
146117
if (domNode.attribs && domNode.attribs.id === 'replace') {
147-
return React.createElement('span', {
148-
style: { fontSize: '42px' }
149-
}, 'replaced!');
150-
// equivalent jsx syntax:
151-
// return <span style={{ fontSize: '42px' }}>replaced!</span>;
118+
return <span>replaced</span>;
152119
}
153120
}
154121
});
155-
156-
require('react-dom').render(
157-
reactElement,
158-
document.getElementById('root')
159-
);
160-
// <div>
161-
// <span style="font-size: 42px;">
162-
// replaced!
163-
// </span>
164-
// </div>
165122
```
166123

167124
Advanced example (the replaced element's children are kept):

0 commit comments

Comments
 (0)