react-shimmer-effects

Customizable shimmer effects for React.

$3

Install

``bash
npm install react-shimmer-effects --save
`

or

`bash
yarn add react-shimmer-effects
`

Elements

$3

`jsx
import React from "react";
import { ShimmerButton } from "react-shimmer-effects";

class Example extends Component {
render() {
return ;
}
}
`

!buttons

#### Properties

| Property | Type | Required | Default value | Description |
| :------- | :----- | :------- | :------------ | :----------------------------------------- |
| size | string | yes | md | Three options available ["sm", "md", "lg"] |

---

$3

`jsx
import React from "react";
import { ShimmerBadge } from "react-shimmer-effects";

class Example extends Component {
render() {
return ;
}
}
`

#### Properties

| Property | Type | Required | Default value | Description |
| :------- | :----- | :------- | :------------ | :---------------------------- |
| width | number | no | | Width of the badge in px unit |

---

$3

`jsx
import React from "react";
import { ShimmerTitle } from "react-shimmer-effects";

class Example extends Component {
render() {
return ;
}
}
`

!title

#### Properties

| 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 |

---

$3

`jsx
import React from "react";
import { ShimmerText } from "react-shimmer-effects";

class Example extends Component {
render() {
return ;
}
}
`

!text

#### Properties

| 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 |

---

$3

`jsx
import React from "react";
import { ShimmerCircularImage } from "react-shimmer-effects";

class Example extends Component {
render() {
return ;
}
}
`

!circular-image

#### Properties

| 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 |

---

$3

`jsx
import React from "react";
import { ShimmerThumbnail } from "react-shimmer-effects";

class Example extends Component {
render() {
return ;
}
}
`

!thumbnail

#### Properties

| 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 |

---

Section Header

`jsx
import React from "react";
import { ShimmerSectionHeader } from "react-shimmer-effects";

class Example extends Component {
render() {
return (



);
}
}
`

!header

#### Properties

| 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 |

---

Gallery

$3

`jsx
import React from "react";
import { ShimmerSimpleGallery } from "react-shimmer-effects";

class Example extends Component {
render() {
return (
<>




);
}
}
`

!simple-gallery

#### Properties

| 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 |

---

$3

`jsx
import React from "react";
import { ShimmerFeaturedGallery } from "react-shimmer-effects";

class Example extends Component {
render() {
return ;
}
}
`

!featured-gallery

#### Properties

| 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 |

---

Table

`jsx
import React from "react";
import { ShimmerTable } from "react-shimmer-effects";

class Example extends Component {
render() {
return ;
}
}
`

!table

#### Properties

| 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 |

---

Content Block

`jsx
import React from "react";
import { ShimmerContentBlock } from "react-shimmer-effects";

class Example extends Component {
render() {
return (
title
text
cta
thumbnailWidth={370}
thumbnailHeight={370}
/>
);
}
}
`

!content-block

#### Properties

| 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 |

---

Category

$3

`jsx
import React from "react";
import { ShimmerCategoryItem } from "react-shimmer-effects";

class Example extends Component {
render() {
return (
<>


hasImage
imageType="thumbnail"
imageWidth={100}
imageHeight={100}
title
/>

hasImage
imageType="circular"
imageWidth={100}
imageHeight={100}
title
/>

hasImage
imageType="thumbnail"
imageWidth={100}
imageHeight={100}
text
/>

hasImage
imageType="circular"
imageWidth={100}
imageHeight={100}
text
/>

hasImage
imageType="thumbnail"
imageWidth={100}
imageHeight={100}
text
cta
/>

hasImage
imageType="circular"
imageWidth={100}
imageHeight={100}
text
cta
/>

);
}
}
`

!category-items

#### Properties

| 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 |

---

$3

`jsx
import React from "react";
import { ShimmerCategoryList } from "react-shimmer-effects";

class Example extends Component {
render() {
return ;
}
}
`

!category-list

#### Properties

| 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 |

---

Post

$3

`jsx
import React from "react";
import { ShimmerSocialPost } from "react-shimmer-effects";

class Example extends Component {
render() {
return (
<>





);
}
}
`

!social-posts

#### Properties

| 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 |

---

$3

`jsx
import React from "react";
import { ShimmerPostItem } from "react-shimmer-effects";

class Example extends Component {
render() {
return (
<>


card
title
cta
imageType="thumbnail"
imageWidth={80}
imageHeight={80}
contentCenter
/>

);
}
}
`

!post-items

#### Properties

| 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 |

---

$3

`jsx
import React from "react";
import { ShimmerPostList } from "react-shimmer-effects";

class Example extends Component {
render() {
return ;
}
}
`

!post-list

#### Properties

| 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 |

---

$3

`jsx
import React from "react";
import { ShimmerPostDetails } from "react-shimmer-effects";

class Example extends Component {
render() {
return (
<>



);
}
}
`

!post-details

#### Properties

| 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 |

Contribute

Feel free to send PR and any suggestions. Thanks

License

MIT © Shafikul Islam