Skip to content

Commit 941c508

Browse files
docs(readme): add alternative solution to replace with TypeScript
#221 (comment)
1 parent 78da4d4 commit 941c508

File tree

1 file changed

+13
-1
lines changed

1 file changed

+13
-1
lines changed

README.md

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -178,6 +178,8 @@ parse('<p id="replace">text</p>', {
178178
});
179179
```
180180

181+
#### replace with TypeScript
182+
181183
For TypeScript projects, you may need to check that `domNode` is an instance of domhandler's `Element`:
182184

183185
```tsx
@@ -193,7 +195,13 @@ const options: HTMLReactParserOptions = {
193195
};
194196
```
195197

196-
The following [example](https://repl.it/@remarkablemark/html-react-parser-replace-example) modifies the element along with its children:
198+
If you're having issues with `domNode instanceof Element`, try this [alternative solution](https://github.com/remarkablemark/html-react-parser/issues/221#issuecomment-771600574).
199+
200+
#### replace examples
201+
202+
##### replace element and children
203+
204+
Replace the element and its children (see [demo](https://repl.it/@remarkablemark/html-react-parser-replace-example)):
197205

198206
```jsx
199207
import parse, { domToReact } from 'html-react-parser';
@@ -243,6 +251,8 @@ HTML output:
243251

244252
<!-- prettier-ignore-end -->
245253

254+
##### replace element attributes
255+
246256
Convert DOM attributes to React props with `attributesToProps`:
247257

248258
```jsx
@@ -270,6 +280,8 @@ HTML output:
270280
<div class="prettify" style="background:#fff;text-align:center"></div>
271281
```
272282

283+
##### replace and remove element
284+
273285
[Exclude](https://repl.it/@remarkablemark/html-react-parser-56) an element from rendering by replacing it with `<React.Fragment>`:
274286

275287
```jsx

0 commit comments

Comments
 (0)