Skip to content

GoldenFishe/react-loader-placeholder

Repository files navigation

react-loader-placeholder

npm version npm

Make beautiful, animated loading that easy adapt to your app.

Gif in action

Install

npm install react-loader-placeholder

Principles

The <ReactLoaderPlaceholder> uses HTML data attribute for mark items and CSS for style that items.

Base usabe code

Usage

  1. Wrap component or HTML with <ReactLoaderPlaceholder>.
  2. Set loading prop.
  3. Mark HTML items with data-react-loader-placeholder={true} attribute.
  4. ?????
  5. PROFIT.

If you need to enable or disable not all marked items, just set data-react-loader-placeholder} to true or false.

##Props

The <ReactLoaderPlaceholder> component props:

  • loading boolean required - Enable or disable placeholder.
  • color string optional - Background color of placeholder item.
  • disableAnimation boolean optional - Enable or disable animation.
  • className string optional
  • style Object optional