react-wait-content
React component to postpone children rendering to a determined load state of the page (DOM loaded or fully loaded) with optional additional delay.
It can show a fallback component while waiting and fire a callback at children rendering.
Installation
npm i react-wait-content
Compatibility
Compatible with React >=16.8.0
Compatible with Node >=8.0.0
Features
- Useful for SEO purposes (it delays images or entire off-screen components and sections) and to reduce the First Contentful Paint
- Extremely small: uses react hooks and will occupying less than 2kb in your final bundle
- Safe unmounting: clears timers and listeners at unmounting
Other features
- Runtime type checking with prop-types and static with typescript declaration files
- Exhaustive doc comments
- Tree shakable: exported with ESM modules
- Tested with available coverage report
API
Index
Defer
import { Defer } from 'react-wait-content'
Type: FunctionComponent
Prop | Type | Default | Description |
---|---|---|---|
trigger ? |
TriggerEvent | bypass |
State of the page that triggers the children rendering |
fallback ? |
ReactNode |
undefined |
Component to render instead of children while waiting |
timeout ? |
number |
0 |
Additional delay |
onRender ? |
Function |
undefined |
Function to call on rendering |
TriggerEvent
import { TriggerEvent } from 'react-wait-content'
Type: 'bypass'
, 'domLoaded'
, 'pageLoaded'
Value | Description |
---|---|
'bypass' |
Renders children immediately |
'domLoaded' |
Renders children when "DOMContentLoaded" event is fired |
'pageLoaded' |
Renders children when "load" event is fired |
Usage examples
import Defer from 'react-wait-content' const App = const handleOnRender = window return <div> <h1>This will appear first</h1> <Defer ='pageLoaded' = // <-- = => <h1>This will appear at page loaded + 1 second</h1> </Defer> </div>;
## Dependencies
react-delay-fallback 1.0.1
Peer dependencies
- React: ^16.8.0
- ReactDOM: ^15.6.2
License
MIT