Miss any of our Open RFC calls?Watch the recordings here! »

@gemini-testing/react-lazily-render

1.2.0 • Public • Published

react-lazily-render

Build Status

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.

eventToUpdate

string

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

Install

npm i @gemini-testing/react-lazily-render

DownloadsWeekly Downloads

9

Version

1.2.0

License

MIT

Unpacked Size

26.4 kB

Total Files

20

Last publish

Collaborators

  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar