loading

Customizable Shimmer effects for React

Aug 26, 2021
Customizable Shimmer effects for React

react-shimmer-effects

Customizable shimmer effects for React.

View Demo View Github

Install

npm install react-shimmer-effects --save

or

yarn add react-shimmer-effects

Elements

Shimmer Button

import React from "react"; import { ShimmerButton } from "react-shimmer-effects"; class Example extends Component { render() { return <ShimmerButton size="md" />; } }

buttons

Properties

PropertyTypeRequiredDefault valueDescription
sizestringyesmdThree options available ["sm", "md", "lg"]

Shimmer Badge

import React from "react"; import { ShimmerBadge } from "react-shimmer-effects"; class Example extends Component { render() { return <ShimmerBadge width={120} />; } }

Properties

PropertyTypeRequiredDefault valueDescription
widthnumbernoWidth of the badge in px unit

Shimmer Title

import React from "react"; import { ShimmerTitle } from "react-shimmer-effects"; class Example extends Component { render() { return <ShimmerTitle line={2} gap={10} variant="primary" />; } }

title

Properties

PropertyTypeRequiredDefault valueDescription
linenumberyes2Number of line
gapnumberyes10Gap between of lines. Four options available [10, 15, 20, 30]
variantstringyesprimaryTow options available ["primary", "secondary"]
classNamestringnoAdditonal style classes

Shimmer Text

import React from "react"; import { ShimmerText } from "react-shimmer-effects"; class Example extends Component { render() { return <ShimmerText line={5} gap={10} />; } }

text

Properties

PropertyTypeRequiredDefault valueDescription
linenumberyes5Number of line
gapnumberyes10Gap between of lines. Four options available [10, 15, 20, 30]
classNamestringnoAdditonal style classes

Circular Image

import React from "react"; import { ShimmerCircularImage } from "react-shimmer-effects"; class Example extends Component { render() { return <ShimmerCircularImage size={150} />; } }

circular-image

Properties

PropertyTypeRequiredDefault valueDescription
sizenumberno80Size of Image
centerboolnofalseCenter alignment
classNamestringnoAdditonal style classes

Thumbnail Image

import React from "react"; import { ShimmerThumbnail } from "react-shimmer-effects"; class Example extends Component { render() { return <ShimmerThumbnail height={250} rounded />; } }

thumbnail

Properties

PropertyTypeRequiredDefault valueDescription
widthnumbernoWidth of Thumbnail. By default 100% width
heightnumberyes250Height of Thumbnail.
centerboolnofalseCenter alignment
classNamestringnoAdditonal style classes
roundedboolnofalseBorder radius option enable/disable
fitOnFrameboolnofalseAdjust height of parent. Will block 100% of parent element

Section Header

import React from "react"; import { ShimmerSectionHeader } from "react-shimmer-effects"; class Example extends Component { render() { return ( <div> <ShimmerSectionHeader /> <ShimmerSectionHeader center /> </div> ); } }

header

Properties

PropertyTypeRequiredDefault valueDescription
titleboolnotrueSection Header title
subTitleboolnotrueSection Header subTitle
centerboolnotrueContent center alignment

Gallery

Simple Gallery

import React from "react"; import { ShimmerSimpleGallery } from "react-shimmer-effects"; class Example extends Component { render() { return ( <> <ShimmerSimpleGallery imageType="circular" imageHeight={200} caption /> <ShimmerSimpleGallery card imageHeight={300} /> <ShimmerSimpleGallery card imageHeight={300} caption /> </> ); } }

simple-gallery

Properties

PropertyTypeRequiredDefault valueDescription
cardboolnofalseCard Style enable/disable
rownumberyes3Number of row in your gallery
colnumberyes3Number of column in a row. Three options available [2, 3, 4]
gapnumberyes20Gap between columns. Two options only [20, 30]
imageTypestringyesthumbnailImage Type. Two options only ["thumbnail", "circular"]
imageHeightnumberImage Height
captionboolnofalseImage Caption
fitOnFrameboolnofalseAdjust height of parent. Will block 100% of parent element

Featured Gallery

import React from "react"; import { ShimmerFeaturedGallery } from "react-shimmer-effects"; class Example extends Component { render() { return <ShimmerFeaturedGallery row={2} col={2} card frameHeight={600} />; } }

featured-gallery

Properties

PropertyTypeRequiredDefault valueDescription
cardboolnofalseCard Style enable/disable
rownumberyes2Number of row in your gallery
colnumberyes2Number of column in a row. Three options available [2, 3, 4]
gapnumberyes20Gap between columns. Two options only [20, 30]
frameHeightnumberyes600Height of full frame

Table

import React from "react"; import { ShimmerTable } from "react-shimmer-effects"; class Example extends Component { render() { return <ShimmerTable row={5} col={5} />; } }

table

Properties

PropertyTypeRequiredDefault valueDescription
rownumberyes5Number of row in your Table
colnumberyes5Number of column in a row

Content Block

import React from "react"; import { ShimmerContentBlock } from "react-shimmer-effects"; class Example extends Component { render() { return ( <ShimmerContentBlock title text cta thumbnailWidth={370} thumbnailHeight={370} /> ); } }

content-block

Properties

PropertyTypeRequiredDefault valueDescription
cardboolnotrueCard Style enable/disable
titleboolnofalseTitle
textboolnofalseContent Text
ctaboolnofalseCall to Action
thumbnailWidthnumberyesWidth of the thumbnail image
thumbnailHeightnumberyesHeight of the thumbnail image
reverseboolnofalseAlternate Style option

Category

Category Item

import React from "react"; import { ShimmerCategoryItem } from "react-shimmer-effects"; class Example extends Component { render() { return ( <> <ShimmerCategoryItem /> <ShimmerCategoryItem hasImage imageType="thumbnail" imageWidth={100} imageHeight={100} title /> <ShimmerCategoryItem hasImage imageType="circular" imageWidth={100} imageHeight={100} title /> <ShimmerCategoryItem hasImage imageType="thumbnail" imageWidth={100} imageHeight={100} text /> <ShimmerCategoryItem hasImage imageType="circular" imageWidth={100} imageHeight={100} text /> <ShimmerCategoryItem hasImage imageType="thumbnail" imageWidth={100} imageHeight={100} text cta /> <ShimmerCategoryItem hasImage imageType="circular" imageWidth={100} imageHeight={100} text cta /> </> ); } }

category-items

Properties

PropertyTypeRequiredDefault valueDescription
hasImageboolnofalseThumbnail Image
imageTypestringyesthumbnailImage Type. Two options only ["thumbnail", "circular"]
imageWidthnumberyesWidth of the image
imageHeightnumberyesHeight of the image
titleboolnofalseTitle
textboolnofalseContent Text
ctaboolnofalseCall to Action
contentCenterboolnofalseContent Alignment

Category List

import React from "react"; import { ShimmerCategoryList } from "react-shimmer-effects"; class Example extends Component { render() { return <ShimmerCategoryList title items={6} categoryStyle="STYLE_SEVEN" />; } }

category-list

Properties

PropertyTypeRequiredDefault valueDescription
titleboolnofalseTitle
itemsnumberyes5Number of items in the list
categoryStylestringyesSTYLE_ONECategory style . Seven variation available STYLE_ONE, STYLE_TWO,STYLE_THREE,STYLE_FOUR, STYLE_FIVE, STYLE_SIX, STYLE_SEVEN

Post

Social Post Item

import React from "react"; import { ShimmerSocialPost } from "react-shimmer-effects"; class Example extends Component { render() { return ( <> <ShimmerSocialPost type="image" /> <ShimmerSocialPost type="both" /> <ShimmerSocialPost type="text" /> <ShimmerSocialPost type="text" title /> </> ); } }

social-posts

Properties

PropertyTypeRequiredDefault valueDescription
titleboolnofalseTitle
typestringyesimageStyle type of the Social post. Three variations available image, text, both

Post Item

import React from "react"; import { ShimmerPostItem } from "react-shimmer-effects"; class Example extends Component { render() { return ( <> <ShimmerPostItem card title text cta /> <ShimmerPostItem card title cta /> <ShimmerPostItem card title cta imageType="thumbnail" imageWidth={80} imageHeight={80} contentCenter /> </> ); } }

post-items

Properties

PropertyTypeRequiredDefault valueDescription
imageTypestringyesthumbnailImage Type. Two options only ["thumbnail", "circular"]
imageWidthnumberyesWidth of the image
imageHeightnumberyesHeight of the image
titleboolnofalseTitle
textboolnofalseContent Text
ctaboolnofalseCall to Action

Post List

import React from "react"; import { ShimmerPostList } from "react-shimmer-effects"; class Example extends Component { render() { return <ShimmerPostList postStyle="STYLE_FOUR" col={3} row={2} gap={30} />; } }

post-list

Properties

PropertyTypeRequiredDefault valueDescription
rownumberyes2Number of row
colnumberyes2Number of column in a row. Three options available [2, 3, 4]
gapnumberyes20Gap between columns. Two options only [20, 30]
postStylestringyesSTYLE_FOURCategory style . Eight variation available STYLE_ONE, STYLE_TWO,STYLE_THREE,STYLE_FOUR, STYLE_FIVE, STYLE_SIX, STYLE_SEVEN,STYLE_EIGHT

Post Details

import React from "react"; import { ShimmerPostDetails } from "react-shimmer-effects"; class Example extends Component { render() { return ( <> <ShimmerPostDetails card cta variant="SIMPLE" /> <ShimmerPostDetails card cta variant="EDITOR" /> </> ); } }

post-details

Properties

PropertyTypeRequiredDefault valueDescription
variantstringyesSIMPLETwo options only ["SIMPLE", "EDITOR"]
cardboolnofalseCard Style enable/disable
ctaboolnofalseCall to Action

Contribute

Feel free to send PR and any suggestions. Thanks

Recommended