Skip to content

Commit 5465d8f

Browse files
Tidy README usage examples
Separate the examples into their own code blocks. Rewrite in ES6 syntax for cleanliness and readability.
1 parent cab1472 commit 5465d8f

File tree

1 file changed

+36
-12
lines changed

1 file changed

+36
-12
lines changed

README.md

Lines changed: 36 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -43,34 +43,58 @@ See more [examples](https://github.com/remarkablemark/html-react-parser/tree/mas
4343

4444
## Usage
4545

46-
Render to DOM:
46+
Given that you have the following required:
4747

4848
```js
49-
var Parser = require('html-react-parser');
50-
var ReactDOM = require('react-dom');
49+
// ES6
50+
import Parser from 'html-react-parser';
51+
import { render } from 'react-dom';
52+
```
5153

52-
// single element
53-
ReactDOM.render(
54+
You may render one element:
55+
56+
```js
57+
render(
5458
Parser('<p>single</p>'),
5559
document.getElementById('root')
5660
);
61+
```
62+
63+
You may render adjacent elements:
5764

58-
// adjacent elements
59-
ReactDOM.render(
65+
```js
66+
// with JSX
67+
render(
6068
// the parser returns an array for adjacent elements
6169
// so make sure they are nested under a parent React element
62-
React.createElement('div', {}, Parser('<p>one</p><p>two</p>'))
70+
<div>
71+
{Parser('<p>brother</p><p>sister</p>')}
72+
</div>,
73+
document.getElementById('root')
74+
);
75+
76+
// without JSX
77+
render(
78+
React.createElement('div', {},
79+
Parser('<p>brother</p><p>sister</p>')
80+
),
6381
document.getElementById('root')
6482
);
83+
```
84+
85+
You may render nested elements:
6586

66-
// nested elements
67-
ReactDOM.render(
87+
```js
88+
render(
6889
Parser('<ul><li>inside</li></ul>'),
6990
document.getElementById('root')
7091
);
92+
```
7193

72-
// attributes are preserved
73-
ReactDOM.render(
94+
The parser will also preserve attributes:
95+
96+
```js
97+
render(
7498
Parser('<section id="foo" class="bar baz" data-qux="42">look at me now</section>'),
7599
document.getElementById('root')
76100
);

0 commit comments

Comments
 (0)