react-easy-loader v1.0.0

React Easy Loader

Loader component for React

Installation

  npm install --save react-easy-loader

Usage

Often we need to load some data asynchronously and show loading spinner until result comes

import Loader from 'react-easy-loader'
import React from 'react'

const API = {
  getAppleCount: () =>
    new Promise(resolve => {
      setTimeout(() => resolve(2), 3000)
    })
}

class Application extends React.Component {
  state = { loading: true }

  componentWillMount = async () => {
    const appleCount = await API.getAppleCount()
    this.setState({ loading: false, appleCount })
  }

  render = () => <Loader loading={this.state.loading} loaded={() => <div>{this.state.appleCount}</div>} />
}

Customization

Default spinner is simple <div>Loading...</div>. If you want to have a custom spinner you can pass a component to spinner property. In this example I use CircularProgress and also I make my loading screen black.

import CircularProgress from 'material-ui/CircularProgress'
import Loader from 'react-easy-loader'
import React from 'react'

const Application = () => (
  <Loader
    containerStyle={{ backgroundColor: 'black' }}
    loading={true}
    loaded={() => <div>Loaded</div>}
    spinner={() => <CircularProgress />}
  />
)

API