react-render-if-visible
v2.1.1
Published
Harness the power of Intersection Observers for simple list virtualization in React
Downloads
123,396
Maintainers
Readme
React RenderIfVisible
Harness the power of Intersection Observers for simple list virtualization in React.
This tiny React component is a drop-in list virtualization alternative that defers rendering of its children until it is on or near the screen. Unlike other virtualization libraries, it takes about one minute to integrate and doesn't require you to change your code other than wrapping each item in <RenderIfVisible></RenderIfVisible>
.
It works equally well with responsive item heights, responsive grids, non-flat lists, and any other HTML that would normally make other virtualization libraries complicated to implement.
Advantages over other virtualization techniques:
- No need for a flat list
- Works with any DOM nesting structure
- Is completely decoupled from infinite-scroll or pagination
- Works for responsive grids with no extra configuration
- Easy to drop in - just wrap your list items with
<RenderIfVisible></RenderIfVisible>
- Doesn't require a wrapper around your entire list and doesn't care if other elements are interspersed with the list items
- Doesn't care how scrolling works for your situation (i.e. is it window scroll, or scrolling within a div with
overflow: scroll
) - It is tiny - ~100 lines - and has no dependencies (apart from React as a peer dependency).
This solution has been used successfully in production on NightCafe Creator for almost 2 years.
Read more about the background and development of this component on dev.to.
Version 2
Potentially breaking change - SSR
In v1.x, the component detected when it was being rendered on the server, and set the initial visible state to true. To work with server-side rendering in React 17+, we no-longer detect the server from within the component, but a new prop initialVisible
is exposed which allows you to control whether the child component should be visible on first render or not. This is intended to be used for things like always rendering the first N components as visible, and the rest as not visible (until they're scrolled into view).
Other changes in v2
- Works with React 17 and 18
- A new prop -
stayRendered
(thanks to cyremur) that will keep the element visible after it's been rendered for the first time - New props allow you to specify the type of root and placeholder elements (in versions 1.x they were always divs), which allows you to use this package inside tables, etc
Install and integrate in 1 minute
First, install the component from npm.
npm install react-render-if-visible --save
Then, import the component and wrap each child with it.
import React from 'react'
import RenderIfVisible from 'react-render-if-visible'
import MyListItem from './list-item'
const ESTIMATED_ITEM_HEIGHT = 200
export const MyItemList = (items) => (
<div className="my-list">
{items.map(item => (
<RenderIfVisible defaultHeight={ESTIMATED_ITEM_HEIGHT}>
<MyListItem item={item} />
</RenderIfVisible>
))}
</div>
)
Props
defaultHeight?: number
Default: 300 - An estimate of the element's height.visibleOffset?: number
Default: 1000 - How far outside the viewport (orroot
element) in pixels should elements be considered visible?stayRendered?: boolean
Default: false - Should the element stay rendered after it becomes visible?root?: HTMLElement
Default: null - Root element passed toIntersectionObserver
.rootElement?: HTMLElement
Default: "div" - This is the HTML element that will wrap around the children and placeholder. This root element is always present.placeholderElement?: HTMLElement
Default: "div" - This is the HTML element that will be used for the placeholder. This placeholder element is contained in the root element.children: React.ReactNode
- The component(s)/element(s) for which to defer rendering.
Example usage
When using HTML tables, you can change the default rootElement from "div" to "tbody". For example:
import React from 'react'
import RenderIfVisible from 'react-render-if-visible'
import MyListItem from './list-item'
const ESTIMATED_ITEM_HEIGHT = 200
export const MyItemList = (items) => (
<table className="my-list">
<colgroup>
<col><col>
</colgroup>
{items.map(item => (
<RenderIfVisible defaultHeight={ESTIMATED_ITEM_HEIGHT} rootElement={"tbody"} placeholderElement={"tr"}>
<MyListItem item={item} />
</RenderIfVisible>
))}
</table>
)
The example above, builds a valid HTML table like the one shown below:
<table class="my-list">
<colgroup>
<col><col>
</colgroup>
<tbody class="renderIfVisible">
<tr><td>col1</td><td>col2</td></tr>
</tbody>
<tbody class="renderIfVisible">
<tr><td>col1</td><td>col2</td></tr>
</tbody>
<tbody class="renderIfVisible">
<tr><td>col1</td><td>col2</td></tr>
</tbody>
<tbody class="renderIfVisible">
<tr><td>col1</td><td>col2</td></tr>
</tbody>
... (offscreen)
<tbody class="renderIfVisible">
<tr class="renderIfVisible-placeholder" style="height:200px"></tr>
</tbody>
<tbody class="renderIfVisible">
<tr class="renderIfVisible-placeholder" style="height:200px"></tr>
</tbody>
<tbody class="renderIfVisible">
<tr class="renderIfVisible-placeholder" style="height:200px"></tr>
</tbody>
</table>