-
-
Notifications
You must be signed in to change notification settings - Fork 784
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
VariableSizeList dynamic item height #190
Comments
+1 |
That's not yet supported (unless you want to just in time measure the content, which I wouldn't really recommend). Check out issue #6 for support status though. |
Hi @bvaughn, sorry for writing on a closed issue. I would just like to clarify this... |
So there aren't any other packages that can measure the proposed content before rendering? One of my use cases is to virtualize a messages window. In advance, I know the font, size, and text content. If I know that my message bubble is going to be 500px wide, there's no way for me to figure out the height of the bubble unless I render it in the browser? Just in time measurement kind of defeats the purpose of virtualization... By the way thanks for the amazing package! I am using it very nicely for media feeds. EDIT: Well as it turns out, just-in-time rendering actually isn't that bad, especially for simple text. This example works perfectly: https://codesandbox.io/s/dynamic-size-of-react-window-list-items-64o9p Per this comment: #6 (comment) |
Solution I implemented to get See the responsive design - https://github.com/NadiaIdris/ts-log-viewer#logs-are-responsive <AutoSizer
onResize={() => {
if (listRef.current !== null)
listRef.current.resetAfterIndex(0, true);
}}
>
{({ height, width }) => {
return (
<List
height={height}
width={width}
itemCount={logs.length}
itemSize={(index) => getItemHeight(logs, index)} // itemHeight in pixels
itemData={logs}
ref={listRef as any}
onScroll={(args) => handleScroll(args)}
>
{Row}
</List>
);
}}
</AutoSizer> // Function to get the height of each row in the list.
function getItemHeight(logs: LogLine[], index: number) {
if (logs[index] === undefined) return 30;
const { msg, ts } = logs[index];
const formattedTs = formatDateTimeAMPM(new Date(ts * 1000));
hiddenRowRef.current!["textContent"] = formattedTs + ": " + msg;
const hiddenRowHeight = window
.getComputedStyle(hiddenRowRef.current as Element)
.getPropertyValue("height")
.slice(0, -2);
rowHeightsRef.current.push(Number(hiddenRowHeight));
return Number(hiddenRowHeight);
} |
I landed on a very similar implementation at https://codesandbox.io/s/react-window-dynamic-row-height-8ftbq, compared to the solution @willsmanley posted. But this example works with a static data list too responding to only window resizing events. The key to is to call the |
This issue discussion was helpful. I created a CodePen example demonstrating dynamic content height with VariableSizeList at https://codepen.io/Ishan-Madhusanka/pen/abrYjoa |
I am not sure how to implement this as from the example you fix the height. How do I measure the height of the item element? Perhaps I miss something in this repo. FYI, I'm implementing chat list which has dynamic height.
The text was updated successfully, but these errors were encountered: