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

    3.2.2 • Public • Published

    Logo

    A powerful, customisable, Suspense-like <img> component that (optionally) simulates a shimmer effect while loading. (with zero dependencies!).

    NPM JavaScript Style Guide Github Actions CI Status Maintainability

    Header

    Live Demo

    Install

    npm i react-image-shimmer

    or

    yarn add react-image-shimmer

    Usage

    import React from 'react'
    import Image, { Shimmer } from 'react-shimmer'
    
    function App() {
      return (
        <div>
          <Image
            src='https://source.unsplash.com/random/800x600'
            fallback={<Shimmer width={800} height={600} />}
          />
        </div>
      )
    }

    or you can use your custom React component as a fallback:

    import React from 'react'
    import Image from 'react-shimmer'
    
    import Spinner from './Spinner'
    
    function App(props) {
      return (
        <div>
          <Image
            src="https://example.com/test.jpg"
            fallback={<Spinner />}
          />
        </div>
      )
    }

    Properties

    Property Type Required Default value Description
    src string yes
    fallback ReactNode yes
    errorFallback func no
    onLoad func no
    delay number no Delay in milliseconds before showing the fallback
    fadeIn bool no false Use built-in fade animation on img
    test bool no false For testing, this property remain fallback even after load image
    nativeImgProps React.ImgHTMLAttributes no

    Contributing


    Feel free to send PRs.

    License

    MIT © gokcan

    Install

    npm i react-image-shimmer

    DownloadsWeekly Downloads

    37

    Version

    3.2.2

    License

    MIT

    Unpacked Size

    172 kB

    Total Files

    12

    Last publish

    Collaborators

    • sadeghpro