@@ -343,15 +343,15 @@ Yields:
343
343
### Example: turning hast into react nodes
344
344
345
345
hast trees as returned by refractor can be turned into React (or Preact) with
346
- [ ` hast-to-hyperscript ` ] [ github-hast-to-hyperscript ] :
346
+ [ ` hast-util- to-jsx-runtime ` ] [ github-hast-util- to-jsx-runtime ] :
347
347
348
348
``` js
349
+ import {toJsxRuntime } from ' hast-util-to-jsx-runtime'
350
+ import {Fragment , jsxs , jsx } from ' react/jsx-runtime'
349
351
import {refractor } from ' refractor'
350
- import {toH } from ' hast-to-hyperscript'
351
- import React from ' react'
352
352
353
353
const tree = refractor .highlight (' "use strict";' , ' js' )
354
- const react = toH ( React . createElement , tree )
354
+ const reactNode = toJsxRuntime (tree, {Fragment, jsxs, jsx} )
355
355
356
356
console .log (react)
357
357
```
@@ -789,10 +789,10 @@ See [How to Contribute to Open Source][opensource-guide].
789
789
790
790
[ github-hast-root ] : https://github.com/syntax-tree/hast#root
791
791
792
- [ github-hast-to-hyperscript ] : https://github.com/syntax-tree/hast-to-hyperscript
793
-
794
792
[ github-hast-util-to-html ] : https://github.com/syntax-tree/hast-util-to-html
795
793
794
+ [ github-hast-util-to-jsx-runtime ] : https://github.com/syntax-tree/hast-util-to-jsx-runtime
795
+
796
796
[ github-highlightjs ] : https://github.com/highlightjs/highlight.js
797
797
798
798
[ github-lowlight ] : https://github.com/wooorm/lowlight
0 commit comments