Grid like list

[oleggrishechkin]

Grid like list

[oleggrishechkin]

Hi, @HakanKOCAK

react-viewport-list created for one column/row list. Not for grids.

But your case is possible with js.

First, you should check isMobile in js (with matchMedia() for example) and then chunk items to 4 (for desktop) of 2 (for mobile).
Second, you should render chunks. Each row will render 4 or 2 items.
Will be good to add key={isMobile} for ViewportList to full re-render on isMobile change.

Code will be like this:

const Grid = ({ items }) => {
    const ref = userRef();
    const isMobile = useMatchMedia('(max-width: 600px)');
    const chunks = useMemo(() => _.chunk(items, isMobile ? 2 : 4), [items, isMobile]);

    return (
        <div className="scrollable column" ref={ref}>
            <ViewportList viewportRef={ref} key={isMedia} items={chunks}>
                 {(row, index) => (
                     <div key={index} className="row">
                         {row.map((item) => <Item key={item.id} data={item} />)}
                    </div>
                 )}
           </ViewportList>
       </div>
   );
};

[HakanKOCAK]

Hi, @HakanKOCAK

react-viewport-list created for one column/row list. Not for grids.

But your case is possible with js.

First, you should check isMobile in js (with matchMedia() for example) and then chunk items to 4 (for desktop) of 2 (for mobile). Second, you should render chunks. Each row will render 4 or 2 items. Will be good to add key={isMobile} for ViewportList to full re-render on isMobile change.

Code will be like this:

const Grid = ({ items }) => {
    const ref = userRef();
    const isMobile = useMatchMedia('(max-width: 600px)');
    const chunks = useMemo(() => _.chunk(items, isMobile ? 2 : 4), [items, isMobile]);

    return (
        <div className="scrollable column" ref={ref}>
            <ViewportList viewportRef={ref} key={isMedia} items={chunks}>
                 {(row, index) => (
                     <div key={index} className="row">
                         {row.map((item) => <Item key={item.id} data={item} />)}
                    </div>
                 )}
           </ViewportList>
       </div>
   );
};

Thanks for the response. Though this solution works for listing, it will break the other requirement which is to scroll given category on tab click as you can see in the screenshot. We have to specify itemMinSize but I couldnt find a way around to achieve the perfect scroll to given category.

[oleggrishechkin]

You have a list of categories where each category is a list of items, right?

What is a scroll container?

What is a scroll issue? (e.g. wrong position)

Will be good if you share some code

[oleggrishechkin]

Seem to be no issue here

[HakanKOCAK]

Thanks for your response, there is no issue about the library but it did not meet my requirements(or I wasnt able to implement it). The underlying structure is pretty big and I have to share a lot of code pieces but I dont think its a good idea. I tried scrollToIndex and it was working okay, not perfect since it uses scrollIntoView as base but I have a dynamic header and other elements that are fixed depending on screen size so I have calculate the perfect scrollY position and pass it to scrollToIndex function, since it uses scrollIntoView, cannot pass extra parameters and wasnt able to get the desired output. It might be very special use case but can be added as a feature maybe. Thanks for your time again.