Skip to content

Commit 8800829

Browse files
docs(readme): improve wording, update code blocks, fix broken link
1 parent e2e6414 commit 8800829

File tree

1 file changed

+40
-27
lines changed

1 file changed

+40
-27
lines changed

README.md

Lines changed: 40 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
[![Dependency status](https://david-dm.org/remarkablemark/html-react-parser.svg)](https://david-dm.org/remarkablemark/html-react-parser)
99
[![NPM downloads](https://img.shields.io/npm/dm/html-react-parser.svg?style=flat-square)](https://www.npmjs.com/package/html-react-parser)
1010

11-
HTML to React parser that works on both the server (Node.js) and client (browser):
11+
HTML to React parser that works on both the server (Node.js) and the client (browser):
1212

1313
```
1414
HTMLReactParser(string[, options])
@@ -23,7 +23,7 @@ var parse = require('html-react-parser');
2323
parse('<div>text</div>'); // equivalent to `React.createElement('div', {}, 'text')`
2424
```
2525

26-
[CodeSandbox](https://codesandbox.io/s/940pov1l4w) | [JSFiddle](https://jsfiddle.net/remarkablemark/7v86d800/) | [Repl.it](https://repl.it/@remarkablemark/html-react-parser) | [Examples](https://github.com/remarkablemark/html-react-parser/tree/master/examples).
26+
[CodeSandbox](https://codesandbox.io/s/940pov1l4w) | [JSFiddle](https://jsfiddle.net/remarkablemark/7v86d800/) | [Repl.it](https://repl.it/@remarkablemark/html-react-parser) | [Examples](https://github.com/remarkablemark/html-react-parser/tree/master/examples)
2727

2828
## Installation
2929

@@ -74,22 +74,15 @@ Parse multiple elements:
7474
parse('<li>Item 1</li><li>Item 2</li>');
7575
```
7676

77-
But make sure to render the parsed adjacent elements under a parent element since the parsed output is an array:
77+
Since adjacent elements are parsed as an array, make sure to render them under a parent node:
7878

7979
```jsx
80-
import React from 'react';
81-
import parse from 'html-react-parser';
82-
83-
function App() {
84-
return (
85-
<ul>
86-
{parse(`
87-
<li>Item 1</li>
88-
<li>Item 2</li>
89-
`)}
90-
</ul>
91-
);
92-
}
80+
<ul>
81+
{parse(`
82+
<li>Item 1</li>
83+
<li>Item 2</li>
84+
`)}
85+
</ul>
9386
```
9487

9588
Parse nested elements:
@@ -110,23 +103,43 @@ parse(
110103

111104
#### replace(domNode)
112105

113-
The `replace` method allows you to swap an element with your own React element.
106+
The `replace` callback allows you to swap an element with another React element.
107+
108+
The first argument is an object with the same output as [htmlparser2](https://github.com/fb55/htmlparser2)'s [domhandler](https://github.com/fb55/domhandler#example):
109+
110+
```js
111+
parse('<br>', {
112+
replace: function(domNode) {
113+
console.dir(domNode, { depth: null });
114+
}
115+
});
116+
```
117+
118+
Console output:
114119

115-
The first argument is `domNode`―an object with the same output as [htmlparser2](https://github.com/fb55/htmlparser2)'s [domhandler](https://github.com/fb55/domhandler#example).
120+
```js
121+
{ type: 'tag',
122+
name: 'br',
123+
attribs: {},
124+
children: [],
125+
next: null,
126+
prev: null,
127+
parent: null }
128+
```
116129

117-
The element is replaced only if a valid React element is returned.
130+
The element is replaced only if a _valid_ React element is returned:
118131

119132
```js
120133
parse('<p id="replace">text</p>', {
121-
replace: function(domNode) {
134+
replace: domNode => {
122135
if (domNode.attribs && domNode.attribs.id === 'replace') {
123136
return React.createElement('span', {}, 'replaced');
124137
}
125138
}
126139
});
127140
```
128141

129-
[Example](https://repl.it/@remarkablemark/html-react-parser-replace-example) that modifies an element but keeps the children:
142+
Here's an [example](https://repl.it/@remarkablemark/html-react-parser-replace-example) that modifies an element but keeps the children:
130143

131144
```jsx
132145
import React from 'react';
@@ -149,7 +162,9 @@ const options = {
149162
return (
150163
<h1 style={{ fontSize: 42 }}>{domToReact(children, parserOptions)}</h1>
151164
);
152-
} else if (attribs.class === 'prettify') {
165+
}
166+
167+
if (attribs.class === 'prettify') {
153168
return (
154169
<span style={{ color: 'hotpink' }}>
155170
{domToReact(children, parserOptions)}
@@ -159,8 +174,7 @@ const options = {
159174
}
160175
};
161176

162-
const reactElement = parse(html, options);
163-
console.log(renderToStaticMarkup(reactElement));
177+
console.log(renderToStaticMarkup(parse(html, options)));
164178
```
165179

166180
Output:
@@ -173,12 +187,11 @@ Output:
173187
</h1>
174188
```
175189

176-
[Example](https://repl.it/@remarkablemark/html-react-parser-issue-56) that excludes an element:
190+
Here's an [example](https://repl.it/@remarkablemark/html-react-parser-56) that excludes an element:
177191

178192
```jsx
179193
parse('<p><br id="remove"></p>', {
180-
replace: ({ attribs }) =>
181-
attribs && attribs.id === 'remove' && <React.Fragment />
194+
replace: ({ attribs }) => attribs && attribs.id === 'remove' && <Fragment />
182195
});
183196
```
184197

0 commit comments

Comments
 (0)