TanStack / virtual

🤖 Headless UI for Virtualizing Large Element Lists in JS/TS, React, Solid, Vue and Svelte
https://tanstack.com/virtual
MIT License
5.55k stars 303 forks source link

Not support responsive size? #831

Open jijiseong opened 2 months ago

jijiseong commented 2 months ago

Describe the bug

I use useVirtualize with useWindowSize for the responsive item size.

  const { width } = useWindowSize(); 

  const columnVirtualizer = useVirtualizer({
    horizontal: true,
    count: 100,
    getScrollElement: () => parentRef.current,
    estimateSize: () => width / 10,
    overscan: 5,
  })

Even though the width is changed, columnVirtualizer doesn`t rerendered.

There is the code about the Virtualizer instance in useVirtualizerBase (/pacakges/react-virtual/src/index.tsx, line:39)

  const [instance] = React.useState(
    () => new Virtualizer<TScrollElement, TItemElement>(resolvedOptions),
  )

Even if resolvedOptions have changed, initializing the instance only once. Is this intentional?

Your minimal, reproducible example

https://codesandbox.io/p/sandbox/rough-tdd-4wfpkr

Steps to reproduce

Refer to codesand box

Expected behavior

When I resize the window, items should rerender with new size

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

macOS

tanstack-virtual version

latest

TypeScript version

5.2.2

Additional context

No response

Terms & Code of Conduct

piecyk commented 2 months ago

@jijiseong that is correct, estimateSize is not part of caching strategy, to re-create virtual items you can use,

getItemKey: React.useCallback((index) => index, [width]),

https://codesandbox.io/p/sandbox/sweet-sun-f35n4r?file=%2Fsrc%2FApp.tsx%3A17%2C5-17%2C62

siimsams commented 5 days ago

I'm trying to figure out how is it possible to retain the scroll position when the window or container is resized?

https://codesandbox.io/p/sandbox/quizzical-snowflake-9t5rrk?workspaceId=4639fe9e-259b-4807-83e7-6dc48e992cc6

https://github.com/user-attachments/assets/ac672971-5ab4-4e7b-a236-5f1edea449db

I have the same issue in my app where I'm trying to figure out a case where mobile is turned on it's side. Currently this throws off the scroll position as items and screen resizes.