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.
npm i react-wait-content
Compatible with React >=16.8.0
Compatible with Node >=8.0.0
- 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
- 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
Index
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 |
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 |
import { Defer } from 'react-wait-content'
const App = () => {
const handleOnRender = () => window.alert('onRender called')
return (
<div>
<h1>This will appear first</h1>
<Defer
trigger='pageLoaded'
fallback={<CircularProgress />} // <-- this will be rendered while page is loading
timeout={1000}
onRender={handleOnRender}>
<h1>This will appear at page loaded + 1 second</h1>
</Defer>
</div>;
)
}
react-delay-fallback 1.0.1
- React: ^16.8.0
- ReactDOM: ^15.6.2
MIT