[{"data":1,"prerenderedAt":484},["ShallowReactive",2],{"markdown-doc:\u002Fen\u002Fguide\u002Freact":3},{"id":4,"title":5,"body":6,"description":474,"extension":475,"keywords":476,"locale":477,"meta":478,"navigation":100,"order":104,"path":479,"section":480,"seo":481,"stem":482,"__hash__":483},"docs\u002Fguide\u002Freact.en.md","React integration",{"type":7,"value":8,"toc":468},"minimark",[9,25,30,33,64,295,317,321,328,332,336,360,387,397,401,412,438,452,464],[10,11,12,16,17,20,21,24],"p",{},[13,14,15],"code",{},"@quirekit\u002Fincremark-react"," provides React 19 ",[13,18,19],{},"QuireMarkdown"," directly over\n",[13,22,23],{},"@quirekit\u002Fincremark-core",". Parsing, late references, footnotes, HTML sanitization and\ncache rules are shared with Vue. The React package renders its own semantic DOM and\ndoes not require Vue, QuireKit UI or UnoCSS.",[26,27,29],"h2",{"id":28},"workspace-integration","Workspace integration",[10,31,32],{},"The packages are not on npm yet. In a React application inside the QuireKit workspace:",[34,35,40],"pre",{"className":36,"code":37,"language":38,"meta":39,"style":39},"language-bash shiki shiki-themes github-light github-light github-dark","pnpm add '@quirekit\u002Fincremark-react@workspace:*' react@^19.3.0 react-dom@^19.3.0\n","bash","",[13,41,42],{"__ignoreMap":39},[43,44,47,51,55,58,61],"span",{"class":45,"line":46},"line",1,[43,48,50],{"class":49},"sgQzM","pnpm",[43,52,54],{"class":53},"s-HEn"," add",[43,56,57],{"class":53}," '@quirekit\u002Fincremark-react@workspace:*'",[43,59,60],{"class":53}," react@^19.3.0",[43,62,63],{"class":53}," react-dom@^19.3.0\n",[34,65,69],{"className":66,"code":67,"language":68,"meta":39,"style":39},"language-tsx shiki shiki-themes github-light github-light github-dark","import { QuireMarkdown } from '@quirekit\u002Fincremark-react'\nimport '@quirekit\u002Fincremark-react\u002Fstyles.css'\n\nexport function Answer({ received, messageId, receiving }: {\n  received: string\n  messageId: string\n  receiving: boolean\n}) {\n  return \u003CQuireMarkdown\n    content={received}\n    identity={messageId}\n    status={receiving ? 'receiving' : 'complete'}\n    html={{ styles: 'safe' }}\n    onError={failure => console.error(failure)}\n  \u002F>\n}\n","tsx",[13,70,71,87,95,102,141,153,163,174,180,192,204,215,241,258,284,290],{"__ignoreMap":39},[43,72,73,77,81,84],{"class":45,"line":46},[43,74,76],{"class":75},"sDD9d","import",[43,78,80],{"class":79},"sVPnS"," { QuireMarkdown } ",[43,82,83],{"class":75},"from",[43,85,86],{"class":53}," '@quirekit\u002Fincremark-react'\n",[43,88,90,92],{"class":45,"line":89},2,[43,91,76],{"class":75},[43,93,94],{"class":53}," '@quirekit\u002Fincremark-react\u002Fstyles.css'\n",[43,96,98],{"class":45,"line":97},3,[43,99,101],{"emptyLinePlaceholder":100},true,"\n",[43,103,105,108,111,114,117,121,124,127,129,132,135,138],{"class":45,"line":104},4,[43,106,107],{"class":75},"export",[43,109,110],{"class":75}," function",[43,112,113],{"class":49}," Answer",[43,115,116],{"class":79},"({ ",[43,118,120],{"class":119},"sde8i","received",[43,122,123],{"class":79},", ",[43,125,126],{"class":119},"messageId",[43,128,123],{"class":79},[43,130,131],{"class":119},"receiving",[43,133,134],{"class":79}," }",[43,136,137],{"class":75},":",[43,139,140],{"class":79}," {\n",[43,142,144,147,149],{"class":45,"line":143},5,[43,145,146],{"class":119},"  received",[43,148,137],{"class":75},[43,150,152],{"class":151},"sUNQB"," string\n",[43,154,156,159,161],{"class":45,"line":155},6,[43,157,158],{"class":119},"  messageId",[43,160,137],{"class":75},[43,162,152],{"class":151},[43,164,166,169,171],{"class":45,"line":165},7,[43,167,168],{"class":119},"  receiving",[43,170,137],{"class":75},[43,172,173],{"class":151}," boolean\n",[43,175,177],{"class":45,"line":176},8,[43,178,179],{"class":79},"}) {\n",[43,181,183,186,189],{"class":45,"line":182},9,[43,184,185],{"class":75},"  return",[43,187,188],{"class":79}," \u003C",[43,190,191],{"class":151},"QuireMarkdown\n",[43,193,195,198,201],{"class":45,"line":194},10,[43,196,197],{"class":49},"    content",[43,199,200],{"class":75},"=",[43,202,203],{"class":79},"{received}\n",[43,205,207,210,212],{"class":45,"line":206},11,[43,208,209],{"class":49},"    identity",[43,211,200],{"class":75},[43,213,214],{"class":79},"{messageId}\n",[43,216,218,221,223,226,229,232,235,238],{"class":45,"line":217},12,[43,219,220],{"class":49},"    status",[43,222,200],{"class":75},[43,224,225],{"class":79},"{receiving ",[43,227,228],{"class":75},"?",[43,230,231],{"class":53}," 'receiving'",[43,233,234],{"class":75}," :",[43,236,237],{"class":53}," 'complete'",[43,239,240],{"class":79},"}\n",[43,242,244,247,249,252,255],{"class":45,"line":243},13,[43,245,246],{"class":49},"    html",[43,248,200],{"class":75},[43,250,251],{"class":79},"{{ styles: ",[43,253,254],{"class":53},"'safe'",[43,256,257],{"class":79}," }}\n",[43,259,261,264,266,269,272,275,278,281],{"class":45,"line":260},14,[43,262,263],{"class":49},"    onError",[43,265,200],{"class":75},[43,267,268],{"class":79},"{",[43,270,271],{"class":119},"failure",[43,273,274],{"class":75}," =>",[43,276,277],{"class":79}," console.",[43,279,280],{"class":49},"error",[43,282,283],{"class":79},"(failure)}\n",[43,285,287],{"class":45,"line":286},15,[43,288,289],{"class":79},"  \u002F>\n",[43,291,293],{"class":45,"line":292},16,[43,294,240],{"class":79},[10,296,297,300,301,304,305,308,309,312,313,316],{},[13,298,299],{},"content"," is always the complete received source prefix. The host owns network chunks,\ncancellation and stopping; the component owns incremental parsing and presentation.\nStopping retains the current string. ",[13,302,303],{},"status"," does not repair markers or freeze earlier\nparagraphs. Change ",[13,306,307],{},"identity"," for another message and replace ",[13,310,311],{},"options"," to reconfigure\nthe parser. Advanced hosts may supply a mutually exclusive ",[13,314,315],{},"state"," snapshot.",[26,318,320],{"id":319},"runnable-react-example","Runnable React example",[10,322,323,324,327],{},"This example mounts a real React root. The application is ",[13,325,326],{},"react\u002Fapp.ts","; the Vue file\nonly bridges it into this documentation site. Stream again to observe incomplete HTML,\ncustom markers, late links and footnotes. Disable block reuse for a rendering comparison.",[329,330],"docs-demo",{"name":331},"react\u002Freading",[26,333,335],{"id":334},"components-and-extensions","Components and extensions",[10,337,338,341,342,345,346,349,350,352,353,355,356,359],{},[13,339,340],{},"components"," replaces semantic tags with React components or native tags. Custom\ncomponents receive ",[13,343,344],{},"node",", validated properties and ",[13,347,348],{},"children",". Consume ",[13,351,344],{}," before\nforwarding props to a native element; native tags receive no source metadata. Code block\ncomponents additionally receive ",[13,354,13],{}," and ",[13,357,358],{},"language"," instead of reconstructing source\nfrom children.",[10,361,362,363,366,367,370,371,374,375,378,379,382,383,386],{},"Native Lezer ",[13,364,365],{},"options.syntax"," and MSFE ",[13,368,369],{},"options.extensions"," are shared with Vue. Import\n",[13,372,373],{},"withMarkdownReading"," from the React package to attach ReactNode presentation to the\nexisting source codec. ",[13,376,377],{},"renderInline"," \u002F ",[13,380,381],{},"renderBlocks"," keep source-bound validation.\n",[13,384,385],{},"cacheKey(document)"," covers external custom dependencies; an omitted key conservatively\nreprojects. Do not freeze late definitions to improve cache hit rates.",[10,388,389,392,393,396],{},[13,390,391],{},"load(context, signal)"," starts only after client commit. Input replacement, identity\nchanges and unmount abort it; late resources are also released. A failing ",[13,394,395],{},"render","\ncallback preserves source, and node boundaries isolate client descendant failures.\nReact server rendering does not catch arbitrary descendant exceptions; the host must\nhandle root SSR failures according to React's error boundary contract.",[26,398,400],{"id":399},"ssr-hook-and-cache","SSR, hook and cache",[10,402,403,404,407,408,411],{},"Default ",[13,405,406],{},"ssr=\"semantic\""," completes the same semantic parse on the server and first\nhydration. ",[13,409,410],{},"ssr=\"source\""," initially escapes source and parses after mount. Both sides\nmust supply identical content, identity, configuration and locale. Math and diagram\npreviews use client resources and do not run loaders in SSR.",[10,413,414,417,418,123,420,123,423,355,426,428,429,434,435,437],{},[13,415,416],{},"useMarkdownSource(input, onError?)"," exposes ",[13,419,315],{},[13,421,422],{},"pending",[13,424,425],{},"generation",[13,427,280],{},"\nfor custom React reading shells. Headless hosts use the ",[430,431,433],"a",{"href":432},"\u002Fen\u002Fguide\u002Fheadless","parser core",".\n",[13,436,19],{}," already includes the hook, so it needs no second session.",[10,439,440,441,378,444,447,448,451],{},"React prepares a cache frame during render and accepts it after commit. Abandoned\nframes neither alter the committed directory nor notify error observers. Advanced\nhosts use ",[13,442,443],{},"MarkdownRenderer.prepare(...)",[13,445,446],{},"frame.commit()","; synchronous hosts can\nuse ",[13,449,450],{},"render(...)",". StrictMode cleanup and reconnection are repeatable. External keys\nand HTML callbacks are rechecked on each component render; trigger a React update\nafter changing their external data.",[10,453,454,455,355,459,463],{},"Core, Vue and React are available; other frameworks are deferred. Reuse covers complete\ntop-level blocks. See ",[430,456,458],{"href":457},"\u002Fen\u002Fguide\u002Fperformance","performance limits",[430,460,462],{"href":461},"\u002Fen\u002Fapi\u002Freact","React API",".",[465,466,467],"style",{},"html pre.shiki code .sgQzM, html code.shiki .sgQzM{--shiki-default:#6F42C1;--shiki-light:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .s-HEn, html code.shiki .s-HEn{--shiki-default:#032F62;--shiki-light:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sDD9d, html code.shiki .sDD9d{--shiki-default:#D73A49;--shiki-light:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVPnS, html code.shiki .sVPnS{--shiki-default:#24292E;--shiki-light:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sde8i, html code.shiki .sde8i{--shiki-default:#E36209;--shiki-light:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sUNQB, html code.shiki .sUNQB{--shiki-default:#005CC5;--shiki-light:#005CC5;--shiki-dark:#79B8FF}",{"title":39,"searchDepth":89,"depth":89,"links":469},[470,471,472,473],{"id":28,"depth":89,"text":29},{"id":319,"depth":89,"text":320},{"id":334,"depth":89,"text":335},{"id":399,"depth":89,"text":400},"React components, streaming, SSR and custom nodes sharing the Vue parser core.","md",null,"en",{},"\u002Fen\u002Fguide\u002Freact","Integration",{"title":5,"description":474},"guide\u002Freact.en","MhRo1hn9Ag3eN_brLNHwDt2eRHz71GTNS6Rdl2pNRR4",1793045321690]