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