1.0.2 • Published 6 years ago
react-preloading-screen v1.0.2
About
This is a React component that implements a preloading screen functionality in React. Demo can be found here
Installation
npm install --save react-preloading-screen
or
yarn add react-preloading-screen
Usage
Wrap your app in a Preloader
component and add a Placeholder
component inside with the content of your preloading screen:
import React from 'react';
import { Preloader, Placeholder } from 'react-preloading-screen';
class MyApp extends React.Component {
render() {
return (
<Preloader>
<h1>Welcome to my app!</h1>
<h2>It's being preloaded!</h2>
<Placeholder>
<span>Loading...</span>
</Placeholder>
</Preloader>
);
}
}
Props
Preloader
component supports the following props:
Prop | Explanation |
---|---|
fadeDuration | Amount of time it takes for preloader to fade out (ms) |
className | Class name passed to preloader div |
style | JSX Style object to override preloader styles. Keep in mind: Opacity attribute is used for fade animation. |
How it works
This component uses requestAnimationFrame
to check for document.readyState
and removes overlay once it's complete.
requestAnimationFrame
polyfill
For browsers that don't support requestAnimationFrame
there's a polyfill provided that you can import:
import 'react-preloading-screen/raf-polyfill';