A powerful, customisable, Suspense-like
<img>component that (optionally) simulates a shimmer effect while loading. (with zero dependencies!).
npm i react-shimmeror
yarn add react-shimmerimport 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>
)
}| 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 |
|
NativeImgProps |
React.ImgHTMLAttributes | no |
Feel free to send PRs.
MIT © gokcan