Awesome
<p align='center'> <img alt='Logo' src='https://cdn.rawgit.com/gokcan/react-shimmer/master/media/logo.png' width=40%> </p><p align="center"> <a href="https://www.npmjs.com/package/react-shimmer"> <img alt= "NPM" src="https://img.shields.io/npm/v/react-shimmer.svg"> </a> <a href="https://standardjs.com"> <img alt="JavaScript Style Guide" src="https://img.shields.io/badge/code_style-standard-brightgreen.svg"> </a> <a href="https://github.com/gokcan/react-shimmer/actions?query=workflow%3A%22Node.js+CI%22"> <img alt="Github Actions CI Status" src="https://github.com/gokcan/react-shimmer/workflows/Node.js%20CI/badge.svg?branch=master"> </a> <a href="https://codeclimate.com/github/gokcan/react-shimmer/maintainability"> <img alt= "Maintainability" src="https://api.codeclimate.com/v1/badges/a99a88d28ad37a79dbf6/maintainability"> </a> </p> <p align="center"> <img alt="Header" src="https://cdn.rawgit.com/gokcan/react-shimmer/master/media/header.png" width=60%> </p>A powerful, customisable, Suspense-like
<img>
component that (optionally) simulates a shimmer effect while loading. (with zero dependencies!).
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>
)
}
import React from 'react'
import { Image, Breathing } from 'react-shimmer'
function App() {
return (
<div>
<Image
src='https://source.unsplash.com/random/800x600'
fallback={<Breathing 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<HTMLImageElement> | no |
Contributing
Feel free to send PRs.
License
MIT © gokcan