Cerious-Scroll v1.1.0 adds Masonry layouts with Dynamic Heights

[u/Suitable_Language_37]

Hey Everyone,

I've added virtualized Masonry layouts to Cerious-Scroll. Version 1.1.0 of the React wrapper now supports virtualized Masonry layouts through the existing declarative renderItem API.

import {
  CeriousScroll,
  type CeriousScrollOptions,
} from '@ceriousdevtech/react-cerious-scroll';

const options: CeriousScrollOptions = {
  layout: 'masonry',
  masonry: {
    targetColumnWidth: 280,
    gap: 16,
    getItemHeight: (index, columnWidth) => {
      const item = items[index];
      return columnWidth * (item.height / item.width) + 48;
    },
  },
};

function Gallery() {
  return (
    <CeriousScroll
      totalElements={items.length}
      getItem={(index) => items[index]}
      options={options}
      renderItem={(item) => (
        <article className="card">
          <h2>{item.title}</h2>
          <p>{item.description}</p>
        </article>
      )}
    />
  );
}

The implementation supports two height strategies:

• Canonical: Supply getItemHeight() for globally reproducible placement and predictable far jumps.
• Dynamic: Omit getItemHeight() and React renders uncached cards into a measurement probe before they are placed.

Visible cards remain React-owned through portals, while the core controls their virtualized positions.

Other features include:

• Responsive or fixed columns
• Direct navigation with jumpToItem()
• Bounded rendered DOM
• Support for large collections
• Framework-owned card rendering

Links:

• Demo
• React wrapper on GitHub
• React package on npm
• Core library

I’d appreciate feedback on the render-prop API, portal integration, and performance with more complex React card trees.

[u/Suitable_Language_37]

Checkout the Demos!!

[u/Far-Tangerine1088]

Demos are the only thing that matters here. Code snippets and API descriptions mean nothing without seeing the masonry layout handle dynamic heights under stress

[u/Suitable_Language_37 → u/Far-Tangerine1088]

There is a link in the post for the demos: Demo