React-loading-progress NPM

react-loading-progress

Loading display components

Installation

npm i react-loading-progress

Usage

src

import React from "react"
import Button from "material-ui/Button"
import Loading from "react-loading-progress"

export default () => (
  <Loading loading={true} error={false}>
    <table>
      <thead>
        <tr>
          <th>id</th>
          <th>name</th>
          <th>description</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>foo</td>
          <td>baz</td>
        </tr>
        <tr>
          <td>2</td>
          <td>bar</td>
          <td>baz</td>
        </tr>
      </tbody>
    </table>
  </Loading>
)

Props

Loading

import Loading from "react-loading-progress"

render ( <Loading loading={true} error={false} icon={<div>foo</div>} >...)

name	Type	default	Description
loading	boolean	false	loading display
error	boolean	false	error display
icon	node	(default loading icon)	Use when you want to customize loading display

Progress

import { Progress } from "react-loading-progress"

render ( <Progress isCheckRow>...)

name	Type	default	Description
placement	center,left.right	center	Display position
mask	boolean	false	Display mask
noChild	boolean	false	Do not display children while loading
errorNoChild	boolean	false	Do not display children while error
errorText	string	null	Text to display on error
size	number	1	Loading display size
heightSize	number	1	Loading display height size
widthSize	number	1	Loading display width size
maxHeight	number	100	Maximum height in loading (px)
maxWidth	number	100	Maximum width in loading (px)
ripple	boolean	false	on ripple effect
update	boolean	false	display updating