Skip to content

Commit dac4b4d

Browse files
docs(readme): tidy and refactor replace example
1 parent e43da96 commit dac4b4d

File tree

1 file changed

+17
-19
lines changed

1 file changed

+17
-19
lines changed

README.md

Lines changed: 17 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -122,17 +122,23 @@ The following [example](https://repl.it/@remarkablemark/html-react-parser-replac
122122
```jsx
123123
import React from 'react';
124124
import { renderToStaticMarkup } from 'react-dom/server';
125-
import parse, {domToReact} from 'html-react-parser';
125+
import parse, { domToReact } from 'html-react-parser';
126126

127-
const parserOptions = {
127+
const html = `
128+
<p id="main">
129+
<span class="prettify">
130+
keep me and make me pretty!
131+
</span>
132+
</p>
133+
`;
134+
135+
const options = {
128136
replace: ({ attribs, children }) => {
129137
if (!attribs) return;
130138

131139
if (attribs.id === 'main') {
132140
return (
133-
<h1 style={{ fontSize: 42 }}>
134-
{domToReact(children, parserOptions)}
135-
</h1>
141+
<h1 style={{ fontSize: 42 }}>{domToReact(children, parserOptions)}</h1>
136142
);
137143
} else if (attribs.class === 'prettify') {
138144
return (
@@ -144,25 +150,17 @@ const parserOptions = {
144150
}
145151
};
146152

147-
const elements = parse(
148-
`
149-
<p id="main">
150-
<span class="prettify">
151-
keep me and make me pretty!
152-
</span>
153-
</p>
154-
`,
155-
parserOptions
156-
);
157-
158-
console.log(renderToStaticMarkup(elements));
153+
const reactElement = parse(html, options);
154+
console.log(renderToStaticMarkup(reactElement));
159155
```
160156

161157
The output:
162158

163159
```html
164160
<h1 style="font-size:42px">
165-
<span style="color:hotpink">keep me and make me pretty!</span>
161+
<span style="color:hotpink">
162+
keep me and make me pretty!
163+
</span>
166164
</h1>
167165
```
168166

@@ -177,7 +175,7 @@ parse('<p><br id="remove"></p>', {
177175

178176
## FAQ
179177

180-
#### Is the library XSS safe?
178+
#### Is this library XSS safe?
181179

182180
No, this library does **_not_** sanitize against [XSS (Cross-Site Scripting)](https://wikipedia.org/wiki/Cross-site_scripting). See [#94](https://github.com/remarkablemark/html-react-parser/issues/94).
183181

0 commit comments

Comments
 (0)