jaredLunde / jaredLunde/masonic

Allow to pass width / height size data of each item, use (trust) them as calculating the layout.

Open
#180 3 comments 2 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
1.4k
Forks
63
PR merge metrics
No merged PRs in 30d

Description

I am building pinterest-like app just like others (https://grida.co/library), for my case, all the image are indexed with width/height, width/height data is available at the render time, which the masonry component don't have to rely on observer (unless window resize), the calculation / layout shift can be optimized based on this.

do you have plans for `` with width / height property? (and use that?)

e.g.
`[{id: 1, width: 100, height: 200}]` internally, the component will calculate `width per item`, then calculate item's height by
```ts
const aspect_ratio = input.width / input.height;
const height = width / aspect_ratio;
```

and pass the height value as well, and intenally use this to calculate (abs pos) the item.
also great for virtualization, without causing any layout shifting.

Contributor guide

Open the contributing guide

Research direction

Start with the items API and masonry layout calculation described in the issue. Trace how item dimensions are currently obtained and how absolute positions and virtualization use them. Done means width and height input can drive derived item heights and layout without relying on observation for the initial calculation or causing layout shifts.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend, performance
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.