react-preloading-screen

<p align="center"> <img alt="logo" title="react-preloading-screen" src="logo.svg" width="250"> </p> <p align="center"><b>react-preloading-screen</b></p> <p align="center">Minimal preloading component for React</p>

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
react-preloading-screen
321.0.24 years ago4 years agoMinified + gzip package size for react-preloading-screen in KB

Readme

<img alt="logo" title="react-preloading-screen" src="logo.svg" width="250">

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