isabella232 / react-lazily-render

Delay mounting expensive components until a placeholder component has been scrolled into view.

react-lazily-render

Lazily render react components.

Delay mounting expensive components until a placeholder component has been scrolled into view.

Installation

npm install --save react-lazily-render

Usage

Example (source)

import React from 'react';
import LazilyRender from 'react-lazily-render';

<div>
  ...lots of content...
  <LazilyRender
    placeholder={<PlaceholderComponent/>}
    content={<ExpensiveComponent/>}
  />
  ...lots of content...
  <LazilyRender>
    {render => render
      ? <ExpensiveComponent/>
      : <PlaceholderComponent/>
    }
  </LazilyRender>
  ...lots of content...
</div>

API

Properties

className

string

The className applied to the wrapping element.

component

string | React.ComponentClass

The wrapping component.

e.g.

<LazilyRender component="span"/>
<LazilyRender component={MyComponent}/>

offset

number | {top?: number, right?: number, bottom?: number, left?: number}

An offset applied to the element for calculating whether the component has been scrolled into view.

You can specify individual values for each side, or a single value used for all sides.

placeholder

React.Node

Rendered when the component hasn't been scrolled into view.

content

React.Node

Rendered when the component has been scrolled into view.

children

(render: boolean) => React.Node

Called to render something depending on whether the component has been scrolled into view.

onRender

() => void

Called when the component becomes visible for the first time.

onReset

() => void

Called when the visible component reset his state.

eventToUpdate

string

Client event name on which component should update it's visibility properties.

eventToReset

string

Client event name on which already visible component should reset his current state/listeners and update.