Nutritious Pomegranate Muffins
Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

react-shimmer

3.1.1 • 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-shimmer

or

yarn add react-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
NativeImgProps React.ImgHTMLAttributes no

Contributing


Feel free to send PRs.

License

MIT © gokcan

Install

npm i react-shimmer

DownloadsWeekly Downloads

530

Version

3.1.1

License

MIT

Unpacked Size

172 kB

Total Files

12

Last publish

Collaborators

  • avatar