Long story short, I wrote a Suspense-like async loading, native, React <img>
component almost two years ago. And today, I've published major changes to react-shimmer. (Thank you Mr. Quarantine ππΌ).
Introducing the Release v3.0.0 π€πΌπ
- Source code has been rewritten in TypeScript.
- Native
<img>
component props (all of them) are preserved. - Enforced "separation of concerns" between the actual async handling logic and "loaders". New pluggable-loader architecture.
- Better dependency management + deploy/publish process.
- Zero dependencies.
Check it out! π
gokcan / react-shimmer
π Suspense-like loading, native React <img> component
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>
)
}
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 |
---|
Top comments (0)