jaredLunde / jaredLunde/masonic

Horizontal mode

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

Description

**Is your feature request related to a problem? Please describe.**
We use masonic currently for a fullscreen view of templates in a template gallery. We also have an index view that shows single-row sliders for each infinite list. We use react-slick for this but it's not performant and very difficult to customize. If masonic could layout in a horizontal mode I could use it in both places.

**Describe the solution you'd like**
Perhaps if there was a way to pass in our own render function that did the absolute positioning of tiles, as opposed to the current render function that is used to place content inside of pre-positioned tiles, then I could accomplish this by just swapping x and y, and providing scrollLeft to useMasonry instead of scrollTop.

**Describe alternatives you've considered**
The whole lib could be dimensionally agnostic but that seems like a lot of work

**Additional context**
![Screen Shot 2021-01-30 at 5 50 57 PM](https://user-images.githubusercontent.com/337595/106353210-d4cad580-6323-11eb-84f9-3f6da845a9ea.png)

![Screen Shot 2021-01-30 at 5 51 06 PM](https://user-images.githubusercontent.com/337595/106353207-d09eb800-6323-11eb-9853-7dc24eadef3a.png)

Contributor guide

Open the contributing guide

Research direction

No files or tests are named. Start by tracing useMasonry and the current tile-rendering and positioning flow, then determine how horizontal layout would interact with scrollLeft and the existing render function. Done should provide a usable horizontal mode for the single-row slider use case without regressing the current fullscreen masonry layout.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
28/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.