Nauseating Pumpkin Mush

    react-loading-screen

    0.0.17 • Public • Published

    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

    demo.gif

    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

    const LoadingScreen = require('react-loading-screen');
    // ... or with es2015
    import LoadingScreen from 'react-loading-screen';

    Server side rendering

    Library uses styled components, so follow official docs to configurate, it`s very simple, go to instructions

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

    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.

    Install

    npm i react-loading-screen

    DownloadsWeekly Downloads

    767

    Version

    0.0.17

    License

    MIT

    Unpacked Size

    685 kB

    Total Files

    22

    Last publish

    Collaborators

    • mslavan