react-shimmer-effects-18 v1.0.4

react-shimmer-effects-18

Customizable shimmer effects for React. Forked from https://github.com/shafikulz/react-shimmer-effects and bumped dependency for React 18

Live Demo

Install

npm install react-shimmer-effects-18 --save

or

yarn add react-shimmer-effects-18

Elements

Shimmer Button

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

class Example extends Component {
  render() {
    return <ShimmerButton size="md" />;
  }
}

Properties

Shimmer Badge

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

class Example extends Component {
  render() {
    return <ShimmerBadge width={120} />;
  }
}

Properties

Shimmer Title

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

class Example extends Component {
  render() {
    return <ShimmerTitle line={2} gap={10} variant="primary" />;
  }
}

Properties

Shimmer Text

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

class Example extends Component {
  render() {
    return <ShimmerText line={5} gap={10} />;
  }
}

Properties

Circular Image

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

class Example extends Component {
  render() {
    return <ShimmerCircularImage size={150} />;
  }
}

Properties

Thumbnail Image

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

class Example extends Component {
  render() {
    return <ShimmerThumbnail height={250} rounded />;
  }
}

Properties

Section Header

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

class Example extends Component {
  render() {
    return (
      <div>
        <ShimmerSectionHeader />
        <ShimmerSectionHeader center />
      </div>
    );
  }
}

Properties

Gallery

Simple Gallery

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

class Example extends Component {
  render() {
    return (
      <>
        <ShimmerSimpleGallery imageType="circular" imageHeight={200} caption />
        <ShimmerSimpleGallery card imageHeight={300} />
        <ShimmerSimpleGallery card imageHeight={300} caption />
      </>
    );
  }
}

Properties

Featured Gallery

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

class Example extends Component {
  render() {
    return <ShimmerFeaturedGallery row={2} col={2} card frameHeight={600} />;
  }
}

Properties

Table

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

class Example extends Component {
  render() {
    return <ShimmerTable row={5} col={5} />;
  }
}

Properties

Content Block

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

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

Properties

Category

Category Item

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

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
        />
      </>
    );
  }
}

Properties

Category List

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

class Example extends Component {
  render() {
    return <ShimmerCategoryList title items={6} categoryStyle="STYLE_SEVEN" />;
  }
}

Properties

Post

Social Post Item

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

class Example extends Component {
  render() {
    return (
      <>
        <ShimmerSocialPost type="image" />
        <ShimmerSocialPost type="both" />
        <ShimmerSocialPost type="text" />
        <ShimmerSocialPost type="text" title />
      </>
    );
  }
}

Properties

Post Item

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

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
        />
      </>
    );
  }
}

Properties

Post List

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

class Example extends Component {
  render() {
    return <ShimmerPostList postStyle="STYLE_FOUR" col={3} row={2} gap={30} />;
  }
}

Properties

Post Details

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

class Example extends Component {
  render() {
    return (
      <>
        <ShimmerPostDetails card cta variant="SIMPLE" />
        <ShimmerPostDetails card cta variant="EDITOR" />
      </>
    );
  }
}

Properties

Contribute

Feel free to send PR and any suggestions. Thanks

License

MIT © Shafikul Islam