Repository files navigation

Lazily render react components.

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

npm install --save react-lazily-render

Example (source)

importReactfrom'react';importLazilyRenderfrom'react-lazily-render';<div>  ...lots of content...<LazilyRenderplaceholder={<PlaceholderComponent/>}content={<ExpensiveComponent/>}/>  ...lots of content...<LazilyRender>{render=>render      ?<ExpensiveComponent/>      :<PlaceholderComponent/>}</LazilyRender>  ...lots of content...</div>

string

TheclassName applied to the wrapping element.

string | React.ComponentClass

The wrapping component.

e.g.

<LazilyRendercomponent="span"/><LazilyRendercomponent={MyComponent}/>

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.

React.Node

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

React.Node

Rendered when the component has been scrolled into view.

(render: boolean) => React.Node

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

() => void

Called when the component becomes visible for the first time.

HTMLElement | undefined

The container whichreact-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.