react-content-shimmer
    TypeScript icon, indicating that this package has built-in type declarations

    2.2.6 • Public • Published

    React Content Shimmer / Loader

    Note : New Version v2.2.5 Corrected spelling Mistake Please Refer the docs ... Happy Coding 😀

    Content Shimmer to easily create placeholder loading, image loading, card loading, etc .., free to change the colors, speed, sizes, radius and shadow also have few default Loading Components to use.

    ExampleCode

    NPM JavaScript Style Guide

    Features

    • Customizable: Feel free to change the colors, speed, sizes, radius and shadow;
    • Plug and play: with many default components to use see the example below.
    • 📝DIY: create your own custom loaders easily;

    Install

    npm i --save react-content-shimmer

    Usage

    import ContentShimmer from 'react-content-shimmer'
    const YourStyleName = () => {
      return (
       <ContentShimmer />
      )
    }

    Options

    Prop name and type
    Values Description
    rows?: number
    Defaults to 1
    - It's used to create multiple loader at once in a page
    background?: string
    Defaults to #eeeeee
    - It's is used to change the background of your ContentShimmer
    foreground?: string
    Defaults to #dddddd
    - It's is used to change the foreground color of your ContentShimmer
    elevation?: number
    Defaults to 0.08
    - It's is used for background outset shadow to your ContentShimmer
    speed?: number
    Defaults to 1s
    - Controll Speed of animation support value in seconds
    rounded?: string
    Defaults to 0px
    - Curve of your Loader Component in px , percentage (%)...
    available for use in <ContentShimmer/> , <ProfileShimmer />
    style?: object - Give extra styling you want accept all css properties
    size?: {height? : number, Width? : number} - It's used to change the height and width your ContentShimmer only props use while creating custom ContentShimmer <ContentShimmer />
    radius?: string
    Defaults to sm
    (xs - sm - md - lg - xl) It's is used as giving curve from corner only available in <ProfileShimmer />.
    variant?: string
    Defaults to rounded
    (default - rounded) Shape for the define Style like
    <SocialShimmer />, <CodeShimmer />,<BulletListShimmer />
    animation?: string
    Defaults to wave
    (wave - pulse) Change animation for any of your shimmer or loader

    Example

    **Plug and play components**

    1. Social Style

    import { SocialShimmer } from 'react-content-shimmer'
    const YourStyleName = () => {
      return (
        <SocialShimmer  />
      )
    }

    ExampleCode

    2. Bullet List Style

    import { BulletListShimmer } from 'react-content-shimmer'
    const YourStyleName = () => {
      return (
        <BulletListShimmer  />
      )
    }

    ExampleCode

    3. Code Style

    import { CodeShimmer } from 'react-content-shimmer'
    const YourStyleName = () => {
      return (
        <CodeShimmer  />
      )
    }

    ExampleCode

    4. Profile Style

    import { ProfileShimmer } from 'react-content-shimmer'
    const YourStyleName = () => {
      return (
        <ProfileShimmer  />
      )
    }

    ExampleCode

    5. Custom Creation

    Custom ContentShimmer workes more well with the css or bootstrap classes Create with this Css Tricks will works Awesome 😎 Live Working Example at the Top

    import ContentShimmer from 'react-content-shimmer'
    const YourStyleName = () => {
      return (
        <div className="p-2 d-flex align-items-center">
          <div>
            <div className="p-2 d-flex align-items-center">
              <ContentShimmer size={{ height: 80, width: 80 }} rounded="10%" />
              <div className="p-3">
                <ContentShimmer style={{ marginBottom: "1rem" }} size={{ height: 15, width: 200 }} />
                <ContentShimmer size={{ height: 15, width: 100 }} />
              </div>
            </div>
            <ContentShimmer style={{ marginTop: "1rem" }} rounded={"10px"} size={{ height: 15, width: 350 }} />
            <ContentShimmer style={{ marginTop: "1rem" }} rounded={"10px"} size={{ height: 15, width: 350 }} />
          </div>
        </div>
      )
    }

    Contact

    License

    MIT © Tirth886

    Install

    npm i react-content-shimmer

    DownloadsWeekly Downloads

    103

    Version

    2.2.6

    License

    MIT

    Unpacked Size

    100 kB

    Total Files

    8

    Last publish

    Collaborators

    • tirth886