Skip to content

Commit 6f97d81

Browse files
chore(readme): tidy README instructions and examples
Remove installation instructions for `react` <15.4 because `html-react-parser` now depends on `react-dom-core`. Update cdn installation with `react` 16. Add `react-dom-core` to 'Special Thanks'.
1 parent 53ca089 commit 6f97d81

File tree

1 file changed

+19
-20
lines changed

1 file changed

+19
-20
lines changed

README.md

Lines changed: 19 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ The parser converts an HTML string to [React Element(s)](https://facebook.github
1717

1818
There is also an option to [replace](#replacedomnode) element(s) with your own React Element(s) via the [parser options](#options).
1919

20-
#### Example
20+
## Example
2121

2222
```js
2323
var Parser = require('html-react-parser');
@@ -32,37 +32,36 @@ Parser('<p>Hello, world!</p>');
3232
[NPM](https://www.npmjs.com/package/html-react-parser):
3333

3434
```sh
35-
$ npm install html-react-parser
35+
npm install html-react-parser --save
3636
```
3737

38-
Or if you're using react <15.4:
38+
[Yarn](https://yarn.fyi/html-react-parser):
3939

4040
```sh
41-
$ npm install html-react-parser@0.2
41+
yarn add html-react-parser
4242
```
4343

4444
[CDN](https://unpkg.com/html-react-parser/):
4545

4646
```html
47-
<!-- HTMLReactParser depends on React and ReactDOM -->
48-
<script src="https://unpkg.com/react@latest/dist/react.min.js"></script>
49-
<script src="https://unpkg.com/react-dom@latest/dist/react-dom.min.js"></script>
47+
<!-- HTMLReactParser depends on React -->
48+
<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
5049
<script src="https://unpkg.com/html-react-parser@latest/dist/html-react-parser.min.js"></script>
5150
```
5251

53-
See more [examples](https://github.com/remarkablemark/html-react-parser/tree/master/examples).
52+
See [examples](https://github.com/remarkablemark/html-react-parser/tree/master/examples).
5453

5554
## Usage
5655

57-
Given that you have the following required:
56+
Given that you have the following imported:
5857

5958
```js
60-
// ES6
59+
// ES Modules
6160
import Parser from 'html-react-parser';
6261
import { render } from 'react-dom';
6362
```
6463

65-
You may render one element:
64+
You can render an element:
6665

6766
```js
6867
render(
@@ -71,7 +70,7 @@ render(
7170
);
7271
```
7372

74-
You may render adjacent elements:
73+
You can render multiple elements:
7574

7675
```js
7776
// with JSX
@@ -93,7 +92,7 @@ render(
9392
);
9493
```
9594

96-
You may render nested elements:
95+
You can render nested elements:
9796

9897
```js
9998
render(
@@ -117,7 +116,7 @@ render(
117116

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

120-
The first argument is `domNode`, which is an object that has the same output as [htmlparser2.parseDOM](https://github.com/fb55/domhandler#example).
119+
The first argument is `domNode`, which is an object that has the same output as [`htmlparser2.parseDOM`](https://github.com/fb55/domhandler#example).
121120

122121
The element is only replaced if a valid React Element is returned.
123122

@@ -137,7 +136,7 @@ Advanced example (keep the replaced children):
137136
```js
138137
// with ES6 and JSX
139138

140-
// converts dom object to React Elements
139+
// converts DOM object to React Elements
141140
import domToReact from 'html-react-parser/lib/dom-to-react';
142141

143142
const html = `
@@ -150,8 +149,7 @@ const html = `
150149
</div>
151150
`;
152151

153-
// parser config
154-
const options = {
152+
const parserOptions = {
155153
replace: (domNode) => {
156154
// do not replace if element has no attributes
157155
if (!domNode.attribs) return;
@@ -174,12 +172,12 @@ const options = {
174172
};
175173

176174
render(
177-
Parser(html, options),
175+
Parser(html, parserOptions),
178176
document.getElementById('root')
179177
);
180178
```
181179

182-
You will get the following:
180+
It will output the following:
183181

184182
```html
185183
<div>
@@ -200,8 +198,9 @@ $ npm run lint
200198

201199
## Special Thanks
202200

203-
- [html-dom-parser](https://github.com/remarkablemark/html-dom-parser)
204201
- [Contributors](https://github.com/remarkablemark/html-react-parser/graphs/contributors)
202+
- [html-dom-parser](https://github.com/remarkablemark/html-dom-parser)
203+
- [react-dom-core](https://github.com/remarkablemark/react-dom-core)
205204

206205
## License
207206

0 commit comments

Comments
 (0)