loadable-image
v3.3.0TypeScript
React Component to lazy load images
0/weekUpdated 11 months agoMITUnpacked: 18.8 KB
Published by Karl: ollylut@gmail.com
npm install loadable-imageloadable-image
React Component to lazy load images.
Installation
``
npm i loadable-image
Or via yarn
yarn add loadable-image
Usage examples
accepts all props of tag.
`tsx
import { AsyncImage } from 'loadable-image'
...
style={{ width: 150, height: 150 }}
/>
`$3
You can pass your own and error components as props to AsyncImage component.
`tsx
import { AsyncImage } from 'loadable-image'
...
style={{ width: 150, height: 150 }}
loader={}
error={}
/>
`$3
Since under the hood is just a picture element. You can pass an array of different Sources as a prop. And browser will pick the first one that it supports.
`tsx
import { AsyncImage } from 'loadable-image'
...
sources={[
{ type:"image/avif", srcSet:"./image.avif" },
{ type:"image/webp", srcSet:"./image.webp" }
]}
style={{ width: 200, height: 200 }}
/>
`$3
To make image responsive you can use property in style prop. This way you can specify only width or height as 100% and the other one as auto.
Note that if you support older browsers you might need to use aspectRatio padding-hack.
`tsx
import { AsyncImage } from 'loadable-image'
...
style={{ width: "100%", height: "auto", aspectRatio: 16 / 9 }}
/>
`Custom Transitions
Under the hood uses transitions-kit library
it's a collection Transition components built on top of react-transition-group its a small library maintained by React team for animating between different views.
You can pass your own Transition as a prop to AsyncImage component.$3
Here’s how you can implement a Blur transition that replaces a low-resolution image with a high-resolution one
`tsx
import { Blur } from 'transitions-kit'
import { AsyncImage } from 'loadable-image'
...
style={{ width: 150, height: 150 }}
Transition={props =>
loader={
}
/>
`$3
By default uses Fade transition.
`tsx
import { Fade } from 'transitions-kit'
import { AsyncImage } from 'loadable-image'
...
style={{ width: 150, height: 150 }}
loader={}
Transition={Fade}
/>
`$3
There are plenty different already predefined Transition components such as , Zoom, Slide, Blur, Fade etc. in transitions-kit.
Feel free to try any of them.
`tsx
import { Grow } from 'transitions-kit'
import { AsyncImage } from 'loadable-image'
...
style={{ width: 150, height: 150 }}
loader={}
Transition={Grow}
/>
`
$3
accepts all standard props for HtmlImageElement and the following:| Property | Type | Description |
|------------|------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------|
| className |
String | NOTE: CSS from style object has a higher priority |
| style | CSSProperties | CSSStyleDeclaration object |
| rootMargin | string by default: '600px 0px' | Margin around the root. Specifies when to trigger an image download. |
| loader | ReactElement | React element to display a loading state. |
| error | ReactElement | React element to display an error state. |
| sources | Array | An array of options for element. |
| timeout | Number or Object | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object. |
| Transition | ComponentType$3
- Forward the ref: The transition components require the first child element to forward its ref to the DOM node. This is usually done with React.forwardRef.
- Single element: The transition components require only one child element (React.Fragment is not allowed).