https://github.com/jameslnewell/react-lazily-render
Delay mounting expensive components until a placeholder component has been scrolled into view.
https://github.com/jameslnewell/react-lazily-render
delay lazy-load react
Last synced: about 1 year ago
JSON representation
Delay mounting expensive components until a placeholder component has been scrolled into view.
- Host: GitHub
- URL: https://github.com/jameslnewell/react-lazily-render
- Owner: jameslnewell
- Created: 2017-11-20T01:26:22.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2022-12-10T18:47:24.000Z (over 3 years ago)
- Last Synced: 2024-10-19T20:10:59.623Z (over 1 year ago)
- Topics: delay, lazy-load, react
- Language: JavaScript
- Size: 3.11 MB
- Stars: 22
- Watchers: 5
- Forks: 9
- Open Issues: 24
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# react-lazily-render
[](https://travis-ci.org/jameslnewell/react-lazily-render)
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](https://jameslnewell.github.io/react-lazily-render) ([source](https://github.com/jameslnewell/react-lazily-render/blob/master/example/App.js#L8))
```js
import React from 'react';
import LazilyRender from 'react-lazily-render';
...lots of content...
}
content={}
/>
...lots of content...
{render => render
?
:
}
...lots of content...
```
## API
### Properties
#### className
> `string`
The `className` applied to the wrapping element.
#### component
> `string | React.ComponentClass`
The wrapping component.
e.g.
```js
```
### 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.