search

oleggrishechkin / react-viewport-list

📜 Virtualization for lists with dynamic item size
https://codesandbox.io/s/react-viewport-list-xw2rt
MIT License
230 stars 20 forks source link

remove spacer in list #65

Closed misterbeedev closed 1 year ago

misterbeedev commented 1 year ago

how to remove renderspacer (first and last elements) in list

oleggrishechkin commented 1 year ago

You can't remove spacers because this is a base part of this library. Solution with spacers give an opportunity to not add wrappers around list or/and item to keep layout the same as you use for .map list rendering.

You can create a fork with list wrapper with paddings (for example) instead of spacers. It's possible with a small implementation changes.

Why do you want to delete spacers?

bfan1256 commented 1 year ago

I'm tryign to use this with a tailwind grid, is there a way to start it as display none because the first div takes up the first space in the grid...

oleggrishechkin commented 1 year ago

I'm tryign to use this with a tailwind grid, is there a way to start it as display none because the first div takes up the first space in the grid...

@bfan1256, you should use renderSpacer and add tailwind className to fill all columns (if your list is vertical). First div must have space. It represents offscreen items.

But I'm not recommend multicolumn grids/flex with wrap) for using with react-viewport-list - this type of lists is unsupported.