React Fragment Refs — interactive playground

<div class="pg">
    <h1 class="pg-title">🎮 Fragment Refs vs the wrapper div</h1>
    <p class="pg-sub">
      Three "widget" cells should land as direct items in a 6-column grid. Switch the
      mode below and watch what a wrapper <code>&lt;div ref&gt;</code> does to that
      layout — then switch to a <code>&lt;Fragment ref&gt;</code> and watch it disappear.
    </p>

<div class="banner info show" id="boot">Loading the real React 19.3.0 runtime from the CDN…</div>

<div id="app" hidden>
      <div class="panel">
        <div class="panel-label"><span class="n">1</span> Pick how the group gets its ref</div>
        <div class="seg" id="modeSeg" role="radiogroup">
          <button class="seg-btn" data-mode="div" aria-pressed="true">Wrapper &lt;div ref&gt; (old way)</button>
          <button class="seg-btn" data-mode="fragment" aria-pressed="false">&lt;Fragment ref&gt; (React 19.3+)</button>
        </div>
      </div>

<div class="panel" style="margin-top:16px">
        <div class="panel-label"><span class="n">2</span> The 6-column grid, as actually rendered</div>
        <p class="hint" style="margin-top:0" id="layoutHint"></p>
        <div id="gridMount"></div>
      </div>

<div class="panel" style="margin-top:16px">
        <div class="panel-label"><span class="n">3</span> Group-level behavior, same code either way</div>
        <p class="hint" style="margin-top:0">
          Click either chip (one delegated listener catches both), then scroll the strip —
          a real <code>IntersectionObserver</code> is attached through the group ref,
          whichever mode is active.
        </p>
        <div class="scroll-strip" id="scrollStrip">
          <div class="spacer"></div>
          <div id="chipMount"></div>
          <div class="spacer"></div>
        </div>
        <div class="status" id="visStatus" style="margin-top:10px">waiting…</div>
        <div class="log" id="log" aria-live="polite" style="margin-top:10px"></div>
      </div>
    </div>
  </div>

preview

Edits run in a sandbox in your browser — nothing is saved and nothing leaves the page.