Introduction

A React HOC module which can be used to create Facebook like loading elelements before data is fetched.

Installation

npm i react-fblike-loader --save

How to Use

Import in your component

import {ReactCardLoader} from 'react-fblike-loader'

Use in your component like this

 <ReactCardLoader>
    your html goes here....
 </ReactCardLoader>

How to construct html(For All elements except images)

<div>
    <h5 className="ph">some text</h5>
    <p className="ph">some text</h5>
    <a className="ph" href="#">some text</h5>
</div>

P.S: Any elements which needs to be shown loader should have the class ph

How to construct HTML for img

 <div className="image-wrapper">
      <img className="ph" src={image_souce} alt="dummy image"/>
  </div>

Wrapping it up

import React from 'react';
import './App.css';
import {ReactCardLoader} from 'react-fblike-loader'

function App() {
  return (
    <div className="App">
     <ReactCardLoader isLoading={false}> // instead of false you can use state variable to check whether data has been fetched or not
        your html goes here....
      </ReactCardLoader>
  </div>
  );
}

export default App;

Props

| Name | PropType | Value | Default | | -------- | -------- | ------------ | ------- | | isLoading | Boolean | true / false | false |

Example

Donate

If you like my work and if my product has helped you in your development please feel free to give a shoutout: