Lazily render react components
npm install react-lazily-render
Lazily render react components.
Delay mounting expensive components until a placeholder component has been scrolled into view.
``
npm install --save react-lazily-render
`js
import React from 'react';
import LazilyRender from 'react-lazily-render';
`
#### className
> string
The className applied to the wrapping element.
#### component
> string | React.ComponentClass
The wrapping component.
e.g.
`js`
> 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.