@@ -17,7 +17,7 @@ The parser converts an HTML string to [React Element(s)](https://facebook.github
1717
1818There 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
2323var 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
6160import Parser from ' html-react-parser' ;
6261import { render } from ' react-dom' ;
6362```
6463
65- You may render one element:
64+ You can render an element:
6665
6766``` js
6867render (
@@ -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
9998render (
@@ -117,7 +116,7 @@ render(
117116
118117The ` 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
122121The 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
141140import domToReact from ' html-react-parser/lib/dom-to-react' ;
142141
143142const 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
176174render (
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