!npm version !npm license

@sullivan/react-virtualizer

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

Installation

``
npm install --save @sullivan/react-virtualizer
`
or
`
yarn add @sullivan/react-virtualizer
`

Usage

Virtual

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

#### Props

| prop | type | default |
|----------|---------|---------|
| tag | string | div |
| style | object | {} |
| children | React.Children | [] |
| rootMargin | string \| number | 100px |
| initialHeight | string \| number | 100vh |
| initialWidth | string \| number | 100vw |

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

const Item = () => (

Resource intensive component here

);
`

Reveal


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

#### Props

| prop | type | default |
|----------|---------|---------|
| tag | string | div |
| style | object | {} |
| children | React.Children | [] |

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

const Image = ({ src }) => (



);
`

Performance Tweaks


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.

Compatability

React 16.8.3+

Changelog

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