support for this library

[hscstudio]

I support You to develop this library because limitation of react-window especially about dynamic size list.. Now react windows plan to version 2 with support dynamic size but may be next year will launced :)

[gnir-work]

Thanks so much :) Currently I am struggling with the bundle size as I have to bundle all of the reactDOM in order to render components on the fly. If you have any idea how to bypass that it will help a lot.

[seahorsepip]

@gnir-work What about letting the user pass reactDom as a prop would that resolve the bundle size?

[seahorsepip]

@gnir-work Seems it won't work with reactDom passed as prop since it won't render synchronously unless I specify react production.js in development and the other way around.

But more interestingly the following works and does not require to bundle anything:

import { renderToString } from 'react-dom/server';

/**
 * Measure an element by temporary rendering it.
 */
const measureElement = element => {
    const container = document.querySelector('#measure-layer') || createMeasureLayer();

    // Renders the React element into the hidden div
    container.innerHTML = renderToString(element);

    // Gets the element size
    const child = container.querySelector('#item-container');
    const height = child.offsetHeight;
    const width = child.offsetWidth;

    // Removes the element from the document
    container.innerHTML = '';

    return { height, width };
};

Since we're only measuring, an HTML string without things like event handlers works fine.

[gnir-work]

Thats an interesting approach. Ill check it out today or tomorow :)

My idea was to divide the measurements into two groups.

1. Async measurements that will run in the background and use react dom render function.
2. Just in time measurements that will happen on the mount of the real item.

That way I can avoid calling reactDom.render from a render function.

But your idea looks simpler to implement 🐻

On Fri, Apr 17, 2020, 09:52 Thomas Gladdines notifications@github.com wrote:

@gnir-work https://github.com/gnir-work Seems it won't work with reactDom passed as prop since it won't render render synchronously unless I specify react production.js in development and the other way around.

But more interestingly the following works and does not require to bundle anything:

import { renderToString } from 'react-dom/server';

/**

• Measure an element by temporary rendering it. */ const measureElement = element => { const container = document.querySelector('#measure-layer') || createMeasureLayer();

  // Renders the React element into the hidden div container.innerHTML = renderToString(element);

  // Gets the element size const child = container.querySelector('#item-container'); const height = child.offsetHeight; const width = child.offsetWidth;

  // Removes the element from the document container.innerHTML = '';

  return { height, width }; };

Since we're only measuring, an HTML string without things like event handlers works fine.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/gnir-work/react-window-dynamic-list/issues/4#issuecomment-615075965, or unsubscribe https://github.com/notifications/unsubscribe-auth/AKLMGSTDLK2XM5ZHY524QQLRM74BHANCNFSM4MDRPGXA .

[gnir-work]

Seams like it really works! Thanks for the great advice 🐻