Lazily render react components.
Delay mounting expensive components until a placeholder component has been scrolled into view.
npm install --save react-lazily-render
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>
string
The className
applied to the wrapping element.
string | React.ComponentClass
The wrapping component.
e.g.
<LazilyRender component="span"/>
<LazilyRender component={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.
() => void
Called when the visible component reset his state.
string
Client event name on which component should update it's visibility properties.
string
Client event name on which already visible component should reset his current state/listeners and update.