https://github.com/wpj/lazy-child
React component that renders its child when it enters the viewport.
https://github.com/wpj/lazy-child
Last synced: about 1 year ago
JSON representation
React component that renders its child when it enters the viewport.
- Host: GitHub
- URL: https://github.com/wpj/lazy-child
- Owner: wpj
- License: mit
- Created: 2019-04-11T09:16:53.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-03T19:30:38.000Z (over 3 years ago)
- Last Synced: 2025-04-13T13:07:28.291Z (about 1 year ago)
- Language: TypeScript
- Size: 1.81 MB
- Stars: 5
- Watchers: 1
- Forks: 1
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# lazy-child
[](https://github.com/wpj/lazy-child/actions)
React component that renders its child when it enters the viewport.
## Installation
```
npm install lazy-child
```
## Usage
```tsx
import Lazy from 'lazy-child';
function LazyLoadedImageExample() {
return (
renderPlaceholder={(ref) => ![Lazy loaded image]()
}
>
);
}
```
## API
### `Lazy`
#### Props
##### `children: React.ReactNode`
A React element to render when the placeholder enters the viewport.
##### `offsetBottom?: number`
Passed to the wrapped [react-peekaboo](https://github.com/wpj/react-peekaboo)
instance.
Number of pixels to add to the bottom of the area checked against when computing
in view elements.
Default: `0`
##### `offsetLeft?: number`
Passed to the wrapped [react-peekaboo](https://github.com/wpj/react-peekaboo)
instance.
Number of pixels to add to the left of the area checked against when computing
in view elements.
Default: `0`
##### `offsetRight?: number`
Passed to the wrapped [react-peekaboo](https://github.com/wpj/react-peekaboo)
instance.
Number of pixels to add to the right of the area checked against when computing
in view elements.
Default: `0`
##### `offsetTop?: number`
Passed to the wrapped [react-peekaboo](https://github.com/wpj/react-peekaboo)
instance.
Number of pixels to add to the top of the area checked against when computing in
view elements.
Default: `0`
##### `renderPlaceholder: (ref: React.Ref) => React.ReactNode`
Render prop that returns a React element to use as a placeholder. The function
receives a ref as its first parameter that must be applied to a DOM element.
##### `throttle?: number`
Passed to the wrapped [react-peekaboo](https://github.com/wpj/react-peekaboo)
instance.
Number of ms to throttle scroll events (only applies in environments that don't
support IntersectionObserver).
Default: `100`