A powerful, customisable,
<img>component that simulates a shimmer effect while loading. (with zero dependencies!) Currently compatible with React, but RN compatibility is also on the way.
npm i react-shimmeror
yarn add react-shimmerimport React from 'react'
import Image from 'react-shimmer'
function App(props) {
return (
<div>
<Image
src="https://example.com/test.jpg"
width={640} height={480}
style={{ objectFit: 'cover' }}
/>
</div>
)
}or you can use the fallback prop:
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 | ||
color |
string | no | #f6f7f8 |
Background color of the loader. |
duration |
number | no | 1600 |
Animation duration (ms) Higher value == slower animation. |
width |
number | yes (no if fallback is present) |
||
height |
number | yes (no if fallback is present) |
||
style |
object | no | ||
onError |
func | no | ||
onLoad |
func | no | ||
fallback |
React.Element | no | ||
delay |
number | no | Delay the starting time of the animation. (ms) |
Feel free to send PRs.
MIT © gokcan