Customizable shimmer effects for React.
npm install react-shimmer-effects --save
or
yarn add react-shimmer-effects
import React from "react";
import { ShimmerButton } from "react-shimmer-effects";
class Example extends Component {
render() {
return <ShimmerButton size="md" />;
}
}
![buttons](https://user-images.githubusercontent.com/10860624/127743787-fec60445-4315-4626-a3e8-caa6d5a958f0.png)
Property |
Type |
Required |
Default value |
Description |
size |
string |
yes |
md |
Three options available ["sm", "md", "lg"] |
import React from "react";
import { ShimmerBadge } from "react-shimmer-effects";
class Example extends Component {
render() {
return <ShimmerBadge width={120} />;
}
}
Property |
Type |
Required |
Default value |
Description |
width |
number |
no |
|
Width of the badge in px unit |
import React from "react";
import { ShimmerTitle } from "react-shimmer-effects";
class Example extends Component {
render() {
return <ShimmerTitle line={2} gap={10} variant="primary" />;
}
}
![title](https://user-images.githubusercontent.com/10860624/127743804-ebf9a9fd-83e0-4821-81ff-570f11350c28.png)
Property |
Type |
Required |
Default value |
Description |
line |
number |
yes |
2 |
Number of line |
gap |
number |
yes |
10 |
Gap between of lines. Four options available [10, 15, 20, 30] |
variant |
string |
yes |
primary |
Tow options available ["primary", "secondary"] |
className |
string |
no |
|
Additonal style classes |
import React from "react";
import { ShimmerText } from "react-shimmer-effects";
class Example extends Component {
render() {
return <ShimmerText line={5} gap={10} />;
}
}
![text](https://user-images.githubusercontent.com/10860624/127743813-97bcc851-bd43-4bb4-a08d-58403906b068.png)
Property |
Type |
Required |
Default value |
Description |
line |
number |
yes |
5 |
Number of line |
gap |
number |
yes |
10 |
Gap between of lines. Four options available [10, 15, 20, 30] |
className |
string |
no |
|
Additonal style classes |
import React from "react";
import { ShimmerCircularImage } from "react-shimmer-effects";
class Example extends Component {
render() {
return <ShimmerCircularImage size={150} />;
}
}
![circular-image](https://user-images.githubusercontent.com/10860624/127363150-a2d92550-f894-46f0-b3c4-af54fc7462e6.png)
Property |
Type |
Required |
Default value |
Description |
size |
number |
no |
80 |
Size of Image |
center |
bool |
no |
false |
Center alignment |
className |
string |
no |
|
Additonal style classes |
import React from "react";
import { ShimmerThumbnail } from "react-shimmer-effects";
class Example extends Component {
render() {
return <ShimmerThumbnail height={250} rounded />;
}
}
![thumbnail](https://user-images.githubusercontent.com/10860624/127362805-179d7477-746f-4780-8203-e268a11a47e6.png)
Property |
Type |
Required |
Default value |
Description |
width |
number |
no |
|
Width of Thumbnail. By default 100% width |
height |
number |
yes |
250 |
Height of Thumbnail. |
center |
bool |
no |
false |
Center alignment |
className |
string |
no |
|
Additonal style classes |
rounded |
bool |
no |
false |
Border radius option enable/disable |
fitOnFrame |
bool |
no |
false |
Adjust height of parent. Will block 100% of parent element |
import React from "react";
import { ShimmerSectionHeader } from "react-shimmer-effects";
class Example extends Component {
render() {
return (
<div>
<ShimmerSectionHeader />
<ShimmerSectionHeader center />
</div>
);
}
}
![header](https://user-images.githubusercontent.com/10860624/127743819-3978681d-6f10-43a1-9460-e0cdf5145bab.png)
Property |
Type |
Required |
Default value |
Description |
title |
bool |
no |
true |
Section Header title |
subTitle |
bool |
no |
true |
Section Header subTitle |
center |
bool |
no |
true |
Content center alignment |
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](https://user-images.githubusercontent.com/10860624/127361840-713d6664-24e8-4e59-bdd1-85794850a755.png)
Property |
Type |
Required |
Default value |
Description |
card |
bool |
no |
false |
Card Style enable/disable |
row |
number |
yes |
3 |
Number of row in your gallery |
col |
number |
yes |
3 |
Number of column in a row. Three options available [2, 3, 4] |
gap |
number |
yes |
20 |
Gap between columns. Two options only [20, 30] |
imageType |
string |
yes |
thumbnail |
Image Type. Two options only ["thumbnail", "circular"] |
imageHeight |
number |
|
|
Image Height |
caption |
bool |
no |
false |
Image Caption |
fitOnFrame |
bool |
no |
false |
Adjust height of parent. Will block 100% of parent element |
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](https://user-images.githubusercontent.com/10860624/127354887-dc475dc1-a010-48e8-bce8-be01b875d11b.png)
Property |
Type |
Required |
Default value |
Description |
card |
bool |
no |
false |
Card Style enable/disable |
row |
number |
yes |
2 |
Number of row in your gallery |
col |
number |
yes |
2 |
Number of column in a row. Three options available [2, 3, 4] |
gap |
number |
yes |
20 |
Gap between columns. Two options only [20, 30] |
frameHeight |
number |
yes |
600 |
Height of full frame |
import React from "react";
import { ShimmerTable } from "react-shimmer-effects";
class Example extends Component {
render() {
return <ShimmerTable row={5} col={5} />;
}
}
![table](https://user-images.githubusercontent.com/10860624/127355289-2256a15d-02cf-4ffc-8e1e-2355a62ac285.png)
Property |
Type |
Required |
Default value |
Description |
row |
number |
yes |
5 |
Number of row in your Table |
col |
number |
yes |
5 |
Number of column in a row |
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](https://user-images.githubusercontent.com/10860624/127356033-d3dabf6d-6fd8-438c-a9d5-b4748371c597.png)
Property |
Type |
Required |
Default value |
Description |
card |
bool |
no |
true |
Card Style enable/disable |
title |
bool |
no |
false |
Title |
text |
bool |
no |
false |
Content Text |
cta |
bool |
no |
false |
Call to Action |
thumbnailWidth |
number |
yes |
|
Width of the thumbnail image |
thumbnailHeight |
number |
yes |
|
Height of the thumbnail image |
reverse |
bool |
no |
false |
Alternate Style option |
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](https://user-images.githubusercontent.com/10860624/127358643-b22c9dfc-4131-4e17-a2b9-c95da64711e7.png)
Property |
Type |
Required |
Default value |
Description |
hasImage |
bool |
no |
false |
Thumbnail Image |
imageType |
string |
yes |
thumbnail |
Image Type. Two options only ["thumbnail", "circular"] |
imageWidth |
number |
yes |
|
Width of the image |
imageHeight |
number |
yes |
|
Height of the image |
title |
bool |
no |
false |
Title |
text |
bool |
no |
false |
Content Text |
cta |
bool |
no |
false |
Call to Action |
contentCenter |
bool |
no |
false |
Content Alignment |
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](https://user-images.githubusercontent.com/10860624/127358194-460dfd64-6ada-4fe2-8b6f-4801f0344bd7.png)
Property |
Type |
Required |
Default value |
Description |
title |
bool |
no |
false |
Title |
items |
number |
yes |
5 |
Number of items in the list |
categoryStyle |
string |
yes |
STYLE_ONE |
Category style . Seven variation available STYLE_ONE , STYLE_TWO ,STYLE_THREE ,STYLE_FOUR , STYLE_FIVE , STYLE_SIX , STYLE_SEVEN
|
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](https://user-images.githubusercontent.com/10860624/127359155-9d78a041-c149-4980-a1cd-73c0660848b0.png)
Property |
Type |
Required |
Default value |
Description |
title |
bool |
no |
false |
Title |
type |
string |
yes |
image |
Style type of the Social post. Three variations available image , text , both
|
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](https://user-images.githubusercontent.com/10860624/127360020-44d3612e-4458-49e3-95e2-84d3eb77196c.png)
Property |
Type |
Required |
Default value |
Description |
imageType |
string |
yes |
thumbnail |
Image Type. Two options only ["thumbnail", "circular"] |
imageWidth |
number |
yes |
|
Width of the image |
imageHeight |
number |
yes |
|
Height of the image |
title |
bool |
no |
false |
Title |
text |
bool |
no |
false |
Content Text |
cta |
bool |
no |
false |
Call to Action |
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](https://user-images.githubusercontent.com/10860624/127360456-7d3646d0-5490-438d-bcda-a83f105e34b5.png)
Property |
Type |
Required |
Default value |
Description |
row |
number |
yes |
2 |
Number of row |
col |
number |
yes |
2 |
Number of column in a row. Three options available [2, 3, 4] |
gap |
number |
yes |
20 |
Gap between columns. Two options only [20, 30] |
postStyle |
string |
yes |
STYLE_FOUR |
Category style . Eight variation available STYLE_ONE , STYLE_TWO ,STYLE_THREE ,STYLE_FOUR , STYLE_FIVE , STYLE_SIX , STYLE_SEVEN ,STYLE_EIGHT
|
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](https://user-images.githubusercontent.com/10860624/127361010-171fbe05-1260-427e-8910-c5f1cf56d749.png)
Property |
Type |
Required |
Default value |
Description |
variant |
string |
yes |
SIMPLE |
Two options only ["SIMPLE", "EDITOR"] |
card |
bool |
no |
false |
Card Style enable/disable |
cta |
bool |
no |
false |
Call to Action |
Feel free to send PR and any suggestions. Thanks
MIT © Shafikul Islam