Package Exports

react-delay-fallback
react-delay-fallback/lib/cjs/index.js
react-delay-fallback/lib/esm/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-delay-fallback) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-delay-fallback

version size download

React component to delay children rendering and show a fallback component while waiting

Installation

npm i react-delay-fallback

Compatibility

Compatible with React >=16.8.0
Compatible with Node >=8.0.0

Features

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

Delay

import { Delay } from 'react-delay-fallback

Type: FunctionComponent

Prop	Type	Default	Usage
`timeout`?	`number`	`0`	Time in milliseconds for rendering
`fallback`?	`ReactNode`	`undefined`	Component to render instead of children while waiting
`onRender`?	`Function`	`undefined`	Function to trigger on render

Usage examples

import { Delay } from 'react-delay-fallback';

function App() {
    const handleOnRender = () => window.alert('Callback invoked at rendering');

    return (
        <Delay
        timeout={5000}
        fallback={<span>Wait a moment...</span>} // <-- this will be rendered while page is loading
        onRender={handleOnRender}>
            <h1>This</h1>
            <p>Will appear after 5 seconds</p>
        </Delay>
    );
}

Dependencies

No dependencies

Peer dependencies

React: ^16.8.0
ReactDOM: ^15.6.2

License

MIT