react-loading-screen
Version:
Loading screen example for react
82 lines (53 loc) • 2.29 kB
Markdown
# react-loading-screen
A React loading screen. Сan be used as a screen saver for the initial download of the application or as an overload screen for promises.
# DEMO
## Installation
```
npm install --save react-loading-screen
```
The modular approach of this library means you're much better off building it into your code with a module bundling system like browserify or webpack.
## Browser Support
Basically IE9+.
## Usage
```js
const LoadingScreen = require('react-loading-screen');
// ... or with es2015
import LoadingScreen from 'react-loading-screen';
```
## Server side rendering
Library uses [styled components](https://www.npmjs.com/package/styled-components), so follow official docs to configurate, it`s very simple, [go to instructions](https://www.styled-components.com/docs/advanced#server-side-rendering)
## Examples
For details about why the examples work, read the API documentation below.
You can also see full code of demo by looking in `example/`.
```js
import React from 'react'
//...
import LoadingScreen from '../react-loading-screen'
//...
<LoadingScreen
loading={true}
bgColor='#f1f1f1'
spinnerColor='#9ee5f8'
textColor='#676767'
logoSrc='/logo.png'
text='Here an introduction sentence (Optional)'
>
// ...
// here loadable content
// for example, async data
//<div>Loadable content</div>
</LoadingScreen>
```
## API
module is represented by a single component, let's call it LoadingScreen, import as shown above
### `LoadingScreen`
Root component, it includes three subcomponents, you can control them through properties
#### props
some of props are **REQUIRED**, if not mentioned prop is OPTIONAL.
**loading** { bool }: the content of the page is loaded or not (**required parameter**).
**bgColor** { string }: background color of loading sreen. deault `#ffffff` .
**spinnerColor** { string }: spinner color. If empty param - not showing.
**textColor** { string }: text under spinner. default `#676767`.
**logoSrc** { string }: url of image. If empty param - not showing.
**text** { string }: background color of loading sreen. If empty param - not showing.