Simple pseudo virtualization and reveal components to hide off-window components

npm install --save @sullivan/react-virtualizer

or

yarn add @sullivan/react-virtualizer

The Virtual component hides its children when it is no longer visible within the browser window.

import Virtual from '@sullivan/react-virtualizer';

const Item = () => (
  <Virtual tag={'p'}>
    Resource intensive component here
  </Virtual>
);

The Reveal component doesn't show any of its children until it is scrolled into the browser window.

import { Reveal } from '@sullivan/react-virtualizer';

const Image = ({ src }) => (
  <Reveal>
    <img src={src}>
  </Reveal>
);

If you find that the Virtual component is slow to load while scrolling or tends to pop-in. You can tweak the initialHeight and initialWidth to be a closer approximation to the actual content. This helps speed up sibling Virtual components in determining their own dimensions.

React 16.8.3+

1.0.5

• Performance improvements, obtaining dimensions from entry instead of forcing a repaint on the component
• Adding number support for initialHeight, initialWidth, and rootMargin

1.0.4

• Added initialHeight and initialWidth to allow for more fine controls of item rendering

1.0.3

• Improved loading times

1.0.0

• First version published