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
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
Checkout the Demo for code examples or the view the Api Here.
npm install –save simple-react-card
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>
)
}
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
Property | Type | Description |
---|---|---|
width | string | Width of the button in percent (%) |
centered | boolean | Should the button be centered within the parent container |
Property | Type | Description |
---|---|---|
textLines | arrayOf Integers | An array of integers containing the width in percentage (%) of each TextLine in the TextBlock |
You can report your issues here or you can send me an email doyinolarewaju@gmail.com. I will be happy to help. Pull Requests are also welcome.