react-wait-content

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
TriggerEvent

---

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.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>;
    )
}

Dependencies

react-delay-fallback 1.0.1

Peer dependencies

• React: ^16.8.0
• ReactDOM: ^15.6.2

License

MIT