react-placeholder-shimmer

Synopsis

React PlaceHolder Shimmer is a Placeholder with the shimmer effect for your needs. Feel free to suggest new placeholder components or fork this repo and extend it. Thanks

Code Example

Checkout the Demo for code examples or the view the Api Here.

Installation

npm install --save simple-react-card

API Reference

import React, {Component} from 'react'
import {MediaBlock, Button, SquareImage, RoundImage, TextBlock} from '../../src'
export default class PlaceHolderExample extends Component {
  render () {
    return (
        <div>
            <MediaBlock>
              <RoundImage />
              <TextBlock textLines={[40, 50]} />
            </MediaBlock>
            <TextBlock textLines={[40, 50, 40]} />
            <Button width='20' centered/>
        </div>
    )
  }

About the elements

The library currently contains three elements and one container. The elements are: -RoundImage -SquareImage -TextBlock -Button

while the container is: -MediaBlock

MediaBlock is only used to align the Round or Square Image to the side of a text instead of below or above it.

You can extend the library and create your own placeholder elements by importing the shimmer css import './react-placeholder-shimmer/lib/css/Shimmer.css' and using the classes shimmer-div shine-me on your own element

Api

Button

| Property | Type | Description | | --- | --- | --- | | width | string | Width of the button in percent (%)| | centered | boolean | Should the button be centered within the parent container |

TextBlock

| Property | Type | Description | | --- | --- | --- | | textLines | arrayOf Integers | An array of integers containing the width in percentage (%) of each TextLine in the TextBlock |

Contributors

You can report your issues here or you can send me an email [email protected]. I will be happy to help. Pull Requests are also welcome.