About

This is a React component that implements a preloading screen functionality in React. Demo can be found here

Installation

``bash npm install --save react-preloading-screen`or`bash 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:

`jsx import React from 'react'; import { Preloader, Placeholder } from 'react-preloading-screen';

class MyApp extends React.Component { render() { return (

`Welcome to my app!`


				It's being preloaded!

				
					Loading...
				
			
		);
	}
}

`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.

`$3`

For browsers that don't support requestAnimationFrame there's a polyfill provided that you can import:

`jsx import 'react-preloading-screen/raf-polyfill';``

react-preloading-screen

Minimal preloading component for React