48:I[660678,["/_next/static/chunks/13vqyfldau57p.js","/_next/static/chunks/1gbl-dcot4vlq.js","/_next/static/chunks/3w7s_-pxil6pv.js","/_next/static/chunks/3zorfbfh_a_pd.js","/_next/static/chunks/0cnrn8dx8wpm6.js","/_next/static/chunks/2e4udl7tfg2xd.js","/_next/static/chunks/1mbdq0lktamc7.js","/_next/static/chunks/0nq310uz96h4-.js","/_next/static/chunks/2i4xo8xu-dpuk.js","/_next/static/chunks/40fmu66fmb8tm.js","/_next/static/chunks/3vehc-g2atkra.js","/_next/static/chunks/2a4jc680f5x-9.js","/_next/static/chunks/2wyk4b1ao4pa_.js","/_next/static/chunks/1gth09_ur0iam.js","/_next/static/chunks/0ugk39ckud30x.js","/_next/static/chunks/0pp6seif9t0rh.js","/_next/static/chunks/3bhq66ea_v7by.js","/_next/static/chunks/44c_5nh0vyeb5.js","/_next/static/chunks/1jiredr0b6jr_.js","/_next/static/chunks/0r86cplnpkdza.js","/_next/static/chunks/2ghxk472-g0i6.js","/_next/static/chunks/1ra7jqz5hyzln.js","/_next/static/chunks/42kj-we3o-c3u.js","/_next/static/chunks/2vvl77bxv5nze.js","/_next/static/chunks/2dk9hti1hh4ut.js","/_next/static/chunks/2l8l4_a9-xhts.js","/_next/static/chunks/1qsa_rj-5yj90.js","/_next/static/chunks/0ewjxq-e6quq-.js","/_next/static/chunks/34y7-26s89h2f.js","/_next/static/chunks/0ojgzwcpt7vsk.js","/_next/static/chunks/3enqpgm3pn7at.js","/_next/static/chunks/3-906s1ue5fj3.js","/_next/static/chunks/2t_5zfez2-77k.js","/_next/static/chunks/2641m2aqdum9a.js","/_next/static/chunks/1cvej8ocaz0a2.js","/_next/static/chunks/1j29bqcxcpyur.js"],"HydrationBoundary"] 47:Tab6,{"@context":"https://schema.org","@graph":[{"@type":"WebSite","@id":"https://app.codemod.com/registry#website","url":"https://app.codemod.com/registry","name":"Codemod Registry"},{"@type":"Organization","@id":"https://app.codemod.com#org","name":"Mohamad Mohebifar","url":"https://app.codemod.com","logo":"https://avatars.githubusercontent.com/u/6104558?v=4"},{"@type":"BreadcrumbList","@id":"https://app.codemod.com/registry/react-19-3-fragment-ref-wrappers#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Registry","item":"https://app.codemod.com/registry"},{"@type":"ListItem","position":2,"name":"react-19-3-fragment-ref-wrappers","item":"https://app.codemod.com/registry/react-19-3-fragment-ref-wrappers"}]},{"@type":"WebPage","@id":"https://app.codemod.com/registry/react-19-3-fragment-ref-wrappers#webpage","url":"https://app.codemod.com/registry/react-19-3-fragment-ref-wrappers","name":"react-19-3-fragment-ref-wrappers - Codemod Registry","description":"Replace display:contents wrapper elements that only exist to hold a ref with a Fragment ref","isPartOf":{"@id":"https://app.codemod.com/registry#website"},"author":{"@id":"https://app.codemod.com#org"},"breadcrumb":{"@id":"https://app.codemod.com/registry/react-19-3-fragment-ref-wrappers#breadcrumb"},"mainEntity":{"@id":"https://app.codemod.com/registry/react-19-3-fragment-ref-wrappers#sourcecode"}},{"@type":"SoftwareSourceCode","@id":"https://app.codemod.com/registry/react-19-3-fragment-ref-wrappers#sourcecode","name":"react-19-3-fragment-ref-wrappers","description":"Replace display:contents wrapper elements that only exist to hold a ref with a Fragment ref","url":"https://app.codemod.com/registry/react-19-3-fragment-ref-wrappers","publisher":{"@id":"https://app.codemod.com#org"},"image":"https://avatars.githubusercontent.com/u/6104558?v=4","isAccessibleForFree":true,"license":"MIT","codeRepository":"https://github.com/codemod/react-codemod/tree/main/codemods/fragment-ref-wrappers","version":"0.1.1","keywords":["React","Fragment","ref"],"datePublished":"2026-09-10 19:59:43.461158+00","dateModified":"2026-09-10 19:59:43.461158+00"},{"@type":"SoftwareApplication","@id":"https://app.codemod.com/registry/react-19-3-fragment-ref-wrappers#app","name":"react-19-3-fragment-ref-wrappers codemod","description":"Replace display:contents wrapper elements that only exist to hold a ref with a Fragment ref","url":"https://app.codemod.com/registry/react-19-3-fragment-ref-wrappers","publisher":{"@id":"https://app.codemod.com#org"},"softwareVersion":"0.1.1","applicationCategory":"DeveloperApplication","operatingSystem":"Cross-platform","offers":{"@type":"Offer","price":"0","priceCurrency":"USD","availability":"https://schema.org/InStock"}}]}49:T81c,# react-19-3-fragment-ref-wrappers Replace wrapper elements that exist only to hold a ref with React 19.3's Fragment refs. The codemod targets `

` and `` elements whose only props are `ref={someRef}` and `style={{ display: "contents" }}`. That combination is the common workaround for "I need a DOM handle on a group of siblings but no wrapper in the layout", and Fragment refs solve it without the extra node. Before the wrapper is removed, every use of the ref in the file is checked against the `FragmentInstance` API (`addEventListener`, `removeEventListener`, `dispatchEvent`, `focus`, `focusLast`, `blur`, `observeUsing`, `unobserveUsing`, `getClientRects`, `getRootNode`, `compareDocumentPosition`, `scrollIntoView`). If the ref is used any other way, for example `ref.current.style` or passing the ref to a custom hook, the element is left alone. ## Usage ```bash npx codemod react-19-3-fragment-ref-wrappers --target ``` ## Example ```tsx // Before import { useEffect, useRef } from "react"; export function Row({ children }) { const rowRef = useRef(null); useEffect(() => { rowRef.current.addEventListener("focusin", onFocus); return () => rowRef.current.removeEventListener("focusin", onFocus); }, []); return (

{children}

); } // After import { Fragment, useEffect, useRef } from "react"; export function Row({ children }) { const rowRef = useRef(null); useEffect(() => { rowRef.current.addEventListener("focusin", onFocus); return () => rowRef.current.removeEventListener("focusin", onFocus); }, []); return ( {children} ); } ``` ## Notes - TypeScript type arguments on `useRef(null)` are not rewritten. Update them to the Fragment instance type exported by your `@types/react` version after running the codemod. - Files that reference React through a default or namespace import get ``; otherwise a named `Fragment` import is added. 19:[["$","script",null,{"type":"application/ld+json","dangerouslySetInnerHTML":{"__html":"$47"}}],["$","$L48",null,{"state":{"mutations":[],"queries":[{"state":{"data":{"json":{"id":"9ecc3feb-a562-417b-9603-6ea6d03a2ea2","name":"react-19-3-fragment-ref-wrappers","displayName":"react-19-3-fragment-ref-wrappers","description":"Replace display:contents wrapper elements that only exist to hold a ref with a Fragment ref","scope":null,"visibility":"public","downloadCount":0,"executionCount":0,"createdAt":"2026-09-10 19:59:43.461158+00","updatedAt":"2026-09-10 19:59:43.461158+00","latestVersion":"0.1.1","keywords":["React","Fragment","ref"],"starCount":0,"author":"Codemod ","homepage":null,"repository":"https://github.com/codemod/react-codemod/tree/main/codemods/fragment-ref-wrappers","license":"MIT","access":"public","documentation":null,"bugsUrl":null,"readme":"$49","organization":{"id":null,"name":null,"slug":null,"avatarUrl":null},"owner":{"id":"60be2aab-7f92-4158-b1ba-ee62555b75f0","username":"mohebifar","name":"Mohamad Mohebifar","avatarUrl":"https://avatars.githubusercontent.com/u/6104558?v=4"},"isLegacy":false,"versions":[{"version":{"id":"5abd618d-a1de-4d10-a437-f830b7b8f083","packageId":"9ecc3feb-a562-417b-9603-6ea6d03a2ea2","version":"0.1.1","description":"Replace display:contents wrapper elements that only exist to hold a ref with a Fragment ref","manifest":{"name":"react-19-3-fragment-ref-wrappers","author":"Codemod ","license":"MIT","targets":{"versions":{},"languages":["tsx"],"frameworks":[]},"version":"0.1.1","keywords":["React","Fragment","ref"],"registry":{"access":"public","visibility":"public"},"workflow":"workflow.yaml","repository":"https://github.com/codemod/react-codemod/tree/main/codemods/fragment-ref-wrappers","description":"Replace display:contents wrapper elements that only exist to hold a ref with a Fragment ref","dependencies":[],"schema_version":"1.0"},"checksum":"4a68c71b96032279603925af6c4301500be39f4814120d80bf6ec61999c4f44e","size":5695,"downloadUrl":"https://registry-cdn.codemod.com/prod/packages/react-19-3-fragment-ref-wrappers/0.1.1/public.tar.gz","aiGenerated":false,"sourceArchiveS3Key":null,"targets":{"languages":["typescript"],"frameworks":[]},"dependencies":[],"languages":["tsx"],"stepTypes":["js-ast-grep"],"workflowMetadata":{"nodes":[{"id":"apply-transforms","name":"Apply AST Transformations","steps":[{"name":"Replace display:contents ref wrappers with Fragment refs","type":"js-ast-grep","metrics":[{"name":"fragment-ref-wrapper-replacements","cardinalityKeys":["file"]}],"language":"tsx","semanticAnalysis":"file"}]}],"metricMetadataVersion":1},"validated":false,"validationErrors":null,"publishedBy":"60be2aab-7f92-4158-b1ba-ee62555b75f0","deprecated":false,"deprecationMessage":null,"downloadCount":0,"cachedTestCases":{"input":"import { useEffect, useRef } from \"react\";\n\nexport function Cards({ items }) {\n const groupRef = useRef(null);\n useEffect(() => {\n groupRef.current.observeUsing(new IntersectionObserver(() => {}));\n }, []);\n return (\n

\n {items.map((item) => (\n

{item.title}

\n ))}\n

\n );\n}\n","output":"import { useEffect, useRef, Fragment } from \"react\";\n\nexport function Cards({ items }) {\n const groupRef = useRef(null);\n useEffect(() => {\n groupRef.current.observeUsing(new IntersectionObserver(() => {}));\n }, []);\n return (\n \n {items.map((item) => (\n

{item.title}

\n ))}\n \n );\n}\n","isValid":true,"examples":[{"name":"add-fragment-import","path":"tests/add-fragment-import","input":"import { useEffect, useRef } from \"react\";\n\nexport function Cards({ items }) {\n const groupRef = useRef(null);\n useEffect(() => {\n groupRef.current.observeUsing(new IntersectionObserver(() => {}));\n }, []);\n return (\n

\n {items.map((item) => (\n

{item.title}

\n ))}\n

{item.title}

\n ))}\n \n );\n}\n","filename":"input.tsx"},{"name":"default-react-import","path":"tests/default-react-import","input":"import React, { useRef } from \"react\";\n\nexport function Toolbar({ children }) {\n const ref = useRef(null);\n const focusFirst = () => ref.current?.focus();\n return (\n <>\n \n

\n {children}\n

\n \n );\n}\n","output":"import React, { useRef } from \"react\";\n\nexport function Toolbar({ children }) {\n const ref = useRef(null);\n const focusFirst = () => ref.current?.focus();\n return (\n <>\n \n \n {children}\n \n \n );\n}\n","filename":"input.tsx"},{"name":"extra-props-no-change","path":"tests/extra-props-no-change","input":"import { useRef } from \"react\";\n\nexport function Labelled({ children }) {\n const ref = useRef(null);\n return (\n

\n {children}\n

\n );\n}\n","output":"import { useRef } from \"react\";\n\nexport function Labelled({ children }) {\n const ref = useRef(null);\n return (\n

\n {children}\n

\n );\n}\n","filename":"input.tsx"},{"name":"fragment-already-imported","path":"tests/fragment-already-imported","input":"import { Fragment, useEffect, useRef } from \"react\";\n\nexport function Row({ children, onFocus }) {\n const rowRef = useRef(null);\n useEffect(() => {\n rowRef.current.addEventListener(\"focusin\", onFocus);\n return () => rowRef.current.removeEventListener(\"focusin\", onFocus);\n }, [onFocus]);\n return (\n

\n {children}\n

\n );\n}\n","output":"import { Fragment, useEffect, useRef } from \"react\";\n\nexport function Row({ children, onFocus }) {\n const rowRef = useRef(null);\n useEffect(() => {\n rowRef.current.addEventListener(\"focusin\", onFocus);\n return () => rowRef.current.removeEventListener(\"focusin\", onFocus);\n }, [onFocus]);\n return (\n \n {children}\n \n );\n}\n","filename":"input.tsx"},{"name":"no-react-import-ref-prop","path":"tests/no-react-import-ref-prop","input":"\"use client\";\n\nexport function Group({ ref, children }) {\n return (\n \n {children}\n \n );\n}\n","output":"\"use client\";\n\nimport { Fragment } from \"react\";\n\nexport function Group({ ref, children }) {\n return (\n \n {children}\n \n );\n}\n","filename":"input.tsx"},{"name":"ref-passed-elsewhere-no-change","path":"tests/ref-passed-elsewhere-no-change","input":"import { useRef } from \"react\";\nimport { useClickOutside } from \"./use-click-outside\";\n\nexport function Menu({ children, onClose }) {\n const ref = useRef(null);\n useClickOutside(ref, onClose);\n return (\n

\n {children}\n

\n );\n}\n","output":"import { useRef } from \"react\";\nimport { useClickOutside } from \"./use-click-outside\";\n\nexport function Menu({ children, onClose }) {\n const ref = useRef(null);\n useClickOutside(ref, onClose);\n return (\n

\n {children}\n

\n );\n}\n","filename":"input.tsx"},{"name":"two-wrappers","path":"tests/two-wrappers","input":"import { useRef } from \"react\";\n\nexport function Columns({ left, right }) {\n const leftRef = useRef(null);\n const rightRef = useRef(null);\n return (\n {\n if (event.key === \"ArrowRight\") rightRef.current.focus();\n if (event.key === \"ArrowLeft\") leftRef.current.focusLast();\n }}\n >\n

{left}

{right}

\n \n );\n}\n","output":"import { useRef, Fragment } from \"react\";\n\nexport function Columns({ left, right }) {\n const leftRef = useRef(null);\n const rightRef = useRef(null);\n return (\n {\n if (event.key === \"ArrowRight\") rightRef.current.focus();\n if (event.key === \"ArrowLeft\") leftRef.current.focusLast();\n }}\n >\n {left}\n {right}\n \n );\n}\n","filename":"input.tsx"},{"name":"unsupported-usage-no-change","path":"tests/unsupported-usage-no-change","input":"import { useEffect, useRef } from \"react\";\n\nexport function Fader({ children }) {\n const ref = useRef(null);\n useEffect(() => {\n ref.current.style.opacity = \"1\";\n }, []);\n return (\n

\n {children}\n

\n );\n}\n","output":"import { useEffect, useRef } from \"react\";\n\nexport function Fader({ children }) {\n const ref = useRef(null);\n useEffect(() => {\n ref.current.style.opacity = \"1\";\n }, []);\n return (\n

\n {children}\n

\n );\n}\n","filename":"input.tsx"}]},"defaultWorkflowName":"default","createdAt":"2026-09-10T19:59:43.461Z","updatedAt":"2026-09-10 19:59:43.981908+00"},"publishedBy":{"id":"60be2aab-7f92-4158-b1ba-ee62555b75f0","username":"mohebifar","name":"Mohamad Mohebifar"},"insightsTemplate":{"packageVersionId":"5abd618d-a1de-4d10-a437-f830b7b8f083","status":"ready","generatedAt":"2026-09-10T19:59:54.806Z"},"workflows":[{"name":"default","path":"workflow.yaml","description":null,"isDefault":true,"languages":["tsx"],"stepTypes":["js-ast-grep"],"workflowMetadata":{"nodes":[{"id":"apply-transforms","name":"Apply AST Transformations","steps":[{"name":"Replace display:contents ref wrappers with Fragment refs","type":"js-ast-grep","metrics":[{"name":"fragment-ref-wrapper-replacements","cardinalityKeys":["file"]}],"language":"tsx","semanticAnalysis":"file"}]}],"metricMetadataVersion":1}}],"packageBehavior":"workflow-only","isBundle":false,"bundleChildren":[],"parentBundles":[{"id":"16325cc2-997e-4de2-99b6-85d280045c85","parentWorkflowName":"default","parentNodeId":"react-19-3-migration","parentStepId":null,"parentStepName":"Replace display:contents ref wrappers with Fragment refs","childSourceRaw":"react-19-3-fragment-ref-wrappers","childWorkflowName":null,"resolutionKind":"registry","resolutionReason":null,"resolutionMessage":null,"isDirect":true,"createdAt":"2026-09-10T19:59:50.123Z","updatedAt":"2026-09-10 19:59:50.123564+00","parentPackage":{"id":"6e798c5d-e600-44a1-9ade-c9be5884f35e","name":"react-19-3-migration-recipe","displayName":"react-19-3-migration-recipe","description":"Run all React 19.3 adoption codemods in sequence","scope":null,"visibility":"public","access":"public","latestVersion":"0.1.1","author":"Codemod "},"parentPackageVersion":{"id":"5655db60-b9e8-48ca-b346-7884ee9f9b1e","packageId":"6e798c5d-e600-44a1-9ade-c9be5884f35e","version":"0.1.1"}}]}],"distTags":{"latest":"0.1.1"},"latestPackageBehavior":"workflow-only","cachedTestCases":"$19:1:props:state:queries:0:state:data:json:versions:0:version:cachedTestCases"},"meta":{"values":{"versions.0.version.createdAt":["Date"],"versions.0.insightsTemplate.generatedAt":["Date"],"versions.0.parentBundles.0.createdAt":["Date"]},"referentialEqualities":{"cachedTestCases":["versions.0.version.cachedTestCases"]}}},"dataUpdateCount":1,"dataUpdatedAt":1789093328277,"error":null,"errorUpdateCount":0,"errorUpdatedAt":0,"fetchFailureCount":0,"fetchFailureReason":null,"fetchMeta":null,"isInvalidated":false,"status":"success","fetchStatus":"idle"},"queryKey":[["registry","getPackage"],{"input":{"name":"react-19-3-fragment-ref-wrappers","scope":"$undefined"},"type":"query"}],"queryHash":"[[\"registry\",\"getPackage\"],{\"input\":{\"name\":\"react-19-3-fragment-ref-wrappers\"},\"type\":\"query\"}]"}]},"children":"$L4a"}]] 1c:null 20:[["$","title","0",{"children":"react-19-3-fragment-ref-wrappers - Codemod Registry"}],["$","meta","1",{"name":"description","content":"Replace display:contents wrapper elements that only exist to hold a ref with a Fragment ref"}],["$","meta","2",{"name":"author","content":"Mohamad Mohebifar"}],["$","meta","3",{"name":"keywords","content":"react-19-3-fragment-ref-wrappers, codemod, code transformation, automated refactoring, package, registry, React, Fragment, ref"}],["$","meta","4",{"name":"creator","content":"Mohamad Mohebifar"}],["$","meta","5",{"name":"publisher","content":"Codemod"}],["$","meta","6",{"name":"robots","content":"index, follow"}],["$","meta","7",{"name":"googlebot","content":"index, follow, max-video-preview:-1, max-image-preview:large, max-snippet:-1"}],["$","meta","8",{"name":"application-name","content":"Codemod Registry"}],["$","meta","9",{"name":"apple-mobile-web-app-title","content":"Codemod"}],["$","meta","10",{"name":"apple-mobile-web-app-capable","content":"yes"}],["$","meta","11",{"name":"apple-mobile-web-app-status-bar-style","content":"default"}],["$","meta","12",{"name":"format-detection","content":"telephone=no"}],["$","meta","13",{"name":"mobile-web-app-capable","content":"yes"}],["$","meta","14",{"name":"msapplication-config","content":"/browserconfig.xml"}],["$","meta","15",{"name":"msapplication-TileColor","content":"#000000"}],["$","meta","16",{"name":"msapplication-tap-highlight","content":"no"}],["$","meta","17",{"name":"theme-color","content":"#000000"}],["$","meta","18",{"name":"viewport","content":"width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"}],["$","link","19",{"rel":"canonical","href":"https://app.codemod.com/registry/react-19-3-fragment-ref-wrappers"}],["$","meta","20",{"property":"og:title","content":"react-19-3-fragment-ref-wrappers - Codemod Registry"}],["$","meta","21",{"property":"og:description","content":"Replace display:contents wrapper elements that only exist to hold a ref with a Fragment ref"}],["$","meta","22",{"property":"og:url","content":"https://app.codemod.com/registry/react-19-3-fragment-ref-wrappers"}],["$","meta","23",{"property":"og:site_name","content":"Codemod Registry"}],["$","meta","24",{"property":"og:locale","content":"en_US"}],["$","meta","25",{"property":"og:image","content":"https://app.codemod.com/api/og/registry/react-19-3-fragment-ref-wrappers"}],["$","meta","26",{"property":"og:image:width","content":"1200"}],["$","meta","27",{"property":"og:image:height","content":"630"}],["$","meta","28",{"property":"og:image:alt","content":"react-19-3-fragment-ref-wrappers package"}],["$","meta","29",{"property":"og:type","content":"website"}],["$","meta","30",{"name":"twitter:card","content":"summary_large_image"}],["$","meta","31",{"name":"twitter:site","content":"@codemod"}],["$","meta","32",{"name":"twitter:creator","content":"@codemod"}],["$","meta","33",{"name":"twitter:title","content":"react-19-3-fragment-ref-wrappers - Codemod Registry"}],["$","meta","34",{"name":"twitter:description","content":"Replace display:contents wrapper elements that only exist to hold a ref with a Fragment ref"}],["$","meta","35",{"name":"twitter:image","content":"https://app.codemod.com/api/og/registry/react-19-3-fragment-ref-wrappers"}]]