shimmer-ui-effect

Shimmer / Lazyload UI Components for React 🚀

Customizable Shimmer UI Compoenents Effects for React.

🔥 MORE CUSTOMIZATION OPTIONS COMING SOON - STAY TUNED!!!

Install

npm install shimmer-ui-effect --save

or

yarn add shimmer-ui-effect

Elements

1️⃣ Shimmer UI Button

   

import React from "react";
import { ShimmerUIButton } from "shimmer-ui-effect";

const App = () => {
  return (
    return <ShimmerUIButton  borderRadius={4} height={40} width={400} />;
  )
}

Properties

Property	Type	Required	Default value	Description
borderRadius	number	no	4	Border Radius of the button in px unit
height	number	no	30	Height of the button in px unit
width	number	no	120	Width of the button in px unit

---

2️⃣ Shimmer UI Title

   

import React from "react";
import { ShimmerUITitle } from "shimmer-ui-effect";

const App = () => {
  render() {
    return <ShimmerUITitle line={3} gap={10} variant="primary" />;
  }
}

Properties

Property	Type	Required	Default value	Description
line	number	yes	3	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️⃣ Shimmer UI Text

   

import React from "react";
import { ShimmerUIText } from "shimmer-ui-effect";

const App = () => {
  render() {
    return <ShimmerUIText line={5} gap={15} />;
  }
}

Properties

Property	Type	Required	Default value	Description
line	number	yes	5	Number of line
gap	number	yes	15	Gap between of lines. Four options available [10, 15, 20, 30]
className	string	no		Additonal style classes

---

4️⃣ Shimmer UI Badge

   

import React from "react";
import { ShimmerUIBadge } from "shimmer-ui-effect";

const App = () => {
  render() {
    return <ShimmerUIBadge width={200} height={30} />;
  }
}

Properties

Property	Type	Required	Default value	Description
width	number	no	100	Width of the badge in px unit
height	number	no	24	Height of the badge in px unit

---

5️⃣ Shimmer UI Circular Image

   

import React from "react";
import { ShimmerUICircularImage } from "shimmer-ui-effect";

const App = () => {
  render() {
    return <ShimmerUICircularImage size={200} />;
  }
}

Properties

Property	Type	Required	Default value	Description
size	number	no	100	Size of Image
center	boolean	no	false	Center alignment property
className	string	no		Additonal style classes

---

6️⃣ Shimmer UI Thumbnail Image

   

import React from "react";
import { ShimmerUIThumbnail } from "shimmer-ui-effect";

const App = () => {
  render() {
    return <ShimmerUIThumbnail height={200} rounded />;
  }
}

Properties

Property	Type	Required	Default value	Description
width	number	no		Width of Thumbnail. By default 100%
height	number	yes	200	Height of Thumbnail.
center	boolean	no	false	Center alignment property
rounded	boolean	no	false	Border radius option enable/disable
fitOnFrame	boolean	no	false	Adjust height of parent. Will block 100% of parent element(s)
className	string	no		Additonal style classes

---

           

Contribute

Feel free to send PR and any suggestions. Thanks & Best Regards 😊

License

MIT © Hiren K Vaghasiya