Lynx UI logo
Lynx UI

<LazyComponent>

A LazyComponent for ReactLynx. It defers the loading of non-critical UI elements.
Info

You can check the source code to understand how it works, and you're welcome to submit MRs to enhance its capabilities.

Basic Usage

<LazyComponent> renders its content after it's exposed, optimizing initial screen rendering performance

Adjust Visibility Margin

Adjust the visibility margin to render <LazyComponent> content earlier, optimizing the visual experience of scrolling and animations.

LazyComponentProps

bottom
iOS
Android
Typepx | rpx·Default10px
To change the viewport size of the target node itself during exposure. >0 means extending the lower boundary of the node, <0 means shrinking the lower boundary of the node.
children
iOS
Android
TypeReactNode
Children
estimatedStyle
iOS
Android
TypeCSSProperties
Estimated height and width need to be set
left
iOS
Android
Typepx | rpx·Default10px
To change the viewport size of the target node itself during exposure. >0 means extending the left boundary of the node, <0 means shrinking the left boundary of the node.
pid
iOS
Android
Typestring
Be used to mark the exposure timing of lazy loading. Please ensure that it is unique throughout the page.
right
iOS
Android
Typepx | rpx·Default10px
To change the viewport size of the target node itself during exposure. >0 means extending the right boundary of the node, <0 means shrinking the right boundary of the node.
scene
iOS
Android
Typestring
Be used to mark the exposure timing of lazy loading. Please ensure that it is unique throughout the page.
top
iOS
Android
Typepx | rpx·Default10px
To change the viewport size of the target node itself during exposure. >0 means extending the upper boundary of the node, <0 means shrinking the upper boundary of the node.
unloadable
iOS
Android
Typeboolean·Defaultfalse
Unload child when dis-exposure to save mem-usage
unmountOnExit
iOS
Android
Typeboolean·Defaultfalse
Unmount child when dis-exposure to save mem-usage
Except as otherwise noted, this work is licensed under a Creative Commons Attribution 4.0 International License, and code samples are licensed under the Apache License 2.0.