@@ -122,8 +122,27 @@ The following [example](https://repl.it/@remarkablemark/html-react-parser-replac
122
122
``` jsx
123
123
import React from ' react' ;
124
124
import { renderToStaticMarkup } from ' react-dom/server' ;
125
- import parse from ' html-react-parser' ;
126
- import domToReact from ' html-react-parser/lib/dom-to-react' ;
125
+ import parse , {domToReact } from ' html-react-parser' ;
126
+
127
+ const parserOptions = {
128
+ replace : ({ attribs, children }) => {
129
+ if (! attribs) return ;
130
+
131
+ if (attribs .id === ' main' ) {
132
+ return (
133
+ < h1 style= {{ fontSize: 42 }}>
134
+ {domToReact (children, parserOptions)}
135
+ < / h1>
136
+ );
137
+ } else if (attribs .class === ' prettify' ) {
138
+ return (
139
+ < span style= {{ color: ' hotpink' }}>
140
+ {domToReact (children, parserOptions)}
141
+ < / span>
142
+ );
143
+ }
144
+ }
145
+ };
127
146
128
147
const elements = parse (
129
148
`
@@ -133,25 +152,7 @@ const elements = parse(
133
152
</span>
134
153
</p>
135
154
` ,
136
- {
137
- replace : ({ attribs, children }) => {
138
- if (! attribs) return ;
139
-
140
- if (attribs .id === ' main' ) {
141
- return (
142
- < h1 style= {{ fontSize: 42 }}>
143
- {domToReact (children, parserOptions)}
144
- < / h1>
145
- );
146
- } else if (attribs .class === ' prettify' ) {
147
- return (
148
- < span style= {{ color: ' hotpink' }}>
149
- {domToReact (children, parserOptions)}
150
- < / span>
151
- );
152
- }
153
- }
154
- }
155
+ parserOptions
155
156
);
156
157
157
158
console .log (renderToStaticMarkup (elements));
0 commit comments