react-delay-fallback
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