react-preloading-screen

react-preloading-screen

Minimal preloading component for React

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';