Responsive, suspenseful images in React
npm install @lxsmnsyc/react-image> Responsive, Suspenseful, Lazy-loading Image component in React

Yarn
``bash`
yarn add @lxsmnsyc/react-image
NPM
`bash`
npm -i @lxsmnsyc/react-image
API.$3
The component uses React's Suspense API to await the image's loading process, so that the image won't feel "snappy" when being rendered in the browser. While being loaded, the provided fallback is rendered.$3
The component not only can receive an image source, it can receive a list of sources, coupled with a media query, which allows the component to present the correct image source when it matches the given media query.$3
Although the native image element supports these kinds of mechanisms, not all browsers supports those features. This component allows the users to achieve the same kind of functionality but with bonuses.Usage
$3
`tsx
import Img from '@lxsmnsyc/react-image';// Your code
src="default.jpg"
fallback={ }
containerRef={containerRef}
sources={[
{
source: 'portrait.jpg',
media: '(orientation: portrait)',
},
{
source: 'landscape.jpg',
media: '(orientation: landscape)',
},
]}
/>
`The
is semantically the same with the component, with some properties removed (i.e. srcSet, sizes, referrerPolicy, crossOrigin, etc.). This component has some extra properties:*
fallback - a ReactNode; used to display as a fallback to the component while the image is being loaded or while the image is out of the view (won't shift back after the image has been loaded).
* containerRef - The container of the , in which case, the DOM parent. This is used to detect if the image has intersected the viewport visibility.
* sources - an array of objects with properties source and media.
* source - the source of the image to be selected.
* media` - the media query used for selecting the image. If similar media occurs in other objects, only the last occuring media that matches will be allowed to select the image to be presented.