0.2.0 • Published 5 years ago
react-even-simpler-img v0.2.0
React Even Simpler Img
Smaller (< 2KB) alternative of react-simple-img that doesn't include IntersectionObserver polyfill.
Install
npm install --save react-even-simpler-img
Import
import { ImageLoader, SimpleImg } from 'react-even-simpler-img';
Usage
First, wrap your app with :
ReactDOM.render(
<ImageLoader>
<App />
</ImageLoader>,
rootNode
);
Use as if it's a normal HTML Image element
<SimpleImg src="https://picsum.photos/40" />
Lazy Loading
To lazy load images, set importance
prop to low
:
<SimpleImg src="https://picsum.photos/40" importance="low" />
This library uses IntersectionObserver to lazy load images. If the browser doesn't support it, this library will gracefully degrade to eager loading approach.
Error Handling
To display a fallback when the image is failed to load, you need to wrap it with an Error Boundary.
// you need to have your own implementation
// of React error boundary
import ErrorBoundary from './MyErrorBoundary';
<ErrorBoundary fallback={<MyImgFallback />}>
<SimpleImg src="https://rubbish.xyz/foo/bar.jpg" />
</ErrorBoundary>;
Also check out react-error-boundary for ready-made ErrorBoundary component!