@@ -17,7 +17,7 @@ The parser converts an HTML string to [React Element(s)](https://facebook.github
17
17
18
18
There is also an option to [ replace] ( #replacedomnode ) element(s) with your own React Element(s) via the [ parser options] ( #options ) .
19
19
20
- #### Example
20
+ ## Example
21
21
22
22
``` js
23
23
var Parser = require (' html-react-parser' );
@@ -32,37 +32,36 @@ Parser('<p>Hello, world!</p>');
32
32
[ NPM] ( https://www.npmjs.com/package/html-react-parser ) :
33
33
34
34
``` sh
35
- $ npm install html-react-parser
35
+ npm install html-react-parser --save
36
36
```
37
37
38
- Or if you're using react <15.4 :
38
+ [ Yarn ] ( https://yarn.fyi/html-react-parser ) :
39
39
40
40
``` sh
41
- $ npm install html-react-parser@0.2
41
+ yarn add html-react-parser
42
42
```
43
43
44
44
[ CDN] ( https://unpkg.com/html-react-parser/ ) :
45
45
46
46
``` 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 >
50
49
<script src =" https://unpkg.com/html-react-parser@latest/dist/html-react-parser.min.js" ></script >
51
50
```
52
51
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 ) .
54
53
55
54
## Usage
56
55
57
- Given that you have the following required :
56
+ Given that you have the following imported :
58
57
59
58
``` js
60
- // ES6
59
+ // ES Modules
61
60
import Parser from ' html-react-parser' ;
62
61
import { render } from ' react-dom' ;
63
62
```
64
63
65
- You may render one element:
64
+ You can render an element:
66
65
67
66
``` js
68
67
render (
@@ -71,7 +70,7 @@ render(
71
70
);
72
71
```
73
72
74
- You may render adjacent elements:
73
+ You can render multiple elements:
75
74
76
75
``` js
77
76
// with JSX
@@ -93,7 +92,7 @@ render(
93
92
);
94
93
```
95
94
96
- You may render nested elements:
95
+ You can render nested elements:
97
96
98
97
``` js
99
98
render (
@@ -117,7 +116,7 @@ render(
117
116
118
117
The ` replace ` method allows you to swap an element with your own React Element.
119
118
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 ) .
121
120
122
121
The element is only replaced if a valid React Element is returned.
123
122
@@ -137,7 +136,7 @@ Advanced example (keep the replaced children):
137
136
``` js
138
137
// with ES6 and JSX
139
138
140
- // converts dom object to React Elements
139
+ // converts DOM object to React Elements
141
140
import domToReact from ' html-react-parser/lib/dom-to-react' ;
142
141
143
142
const html = `
@@ -150,8 +149,7 @@ const html = `
150
149
</div>
151
150
` ;
152
151
153
- // parser config
154
- const options = {
152
+ const parserOptions = {
155
153
replace : (domNode ) => {
156
154
// do not replace if element has no attributes
157
155
if (! domNode .attribs ) return ;
@@ -174,12 +172,12 @@ const options = {
174
172
};
175
173
176
174
render (
177
- Parser (html, options ),
175
+ Parser (html, parserOptions ),
178
176
document .getElementById (' root' )
179
177
);
180
178
```
181
179
182
- You will get the following:
180
+ It will output the following:
183
181
184
182
``` html
185
183
<div >
@@ -200,8 +198,9 @@ $ npm run lint
200
198
201
199
## Special Thanks
202
200
203
- - [ html-dom-parser] ( https://github.com/remarkablemark/html-dom-parser )
204
201
- [ 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 )
205
204
206
205
## License
207
206
0 commit comments