inokawa/virtua 0.48.0

on GitHub

// before
<VList reverse>{children}</VList>;

// after
// Recommended markup to align items to the bottom
<div
  style={{
    overflowY: "auto",
    height: "100%",
    display: "flex",
    flexDirection: "column",
  }}
>
  <div style={{ flexGrow: 1 }} />
  <Virtualizer>{children}</Virtualizer>
</div>;
// or if you want the exactly same markup as reverse prop, use this
const scrollRef = useRef(null);
<div
  ref={scrollRef}
  style={{
    display: "block",
    overflowY: "auto",
    contain: "strict",
    width: "100%",
    height: "100%",
  }}
>
  <div
    style={{
      display: "flex",
      flexDirection: "column",
      justifyContent: "flex-end",
      minHeight: "100%",
      overflow: "clip",
    }}
  >
    <Virtualizer scrollRef={scrollRef}>{children}</Virtualizer>
  </div>
</div>;
// ...or we can use "column-reverse" to invert scroll direction in 0.48.0. May fit depending on your usecase
<div
  style={{
    height: "100%",
    overflowY: "auto",
    display: "flex",
    flexDirection: "column-reverse",
  }}
>
  <Virtualizer>{children}</Virtualizer>
</div>;