npm

Need private packages and team management tools?Check out npm Orgs. »

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.

scrollContainer

HTMLElement | undefined

The container which react-lazily-render listens to for scroll events.

This property can be used in a scenario where you want to specify your own scroll container - e.g. if the component you are rendering is asynchronously added to the DOM.

install

npm i react-lazily-render

Downloadsweekly downloads

6,968

version

1.2.0

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability