React Lazy Blur Images

Lazy Blur Images is a light component that allows developers to implement an async image charge in their websites when they are in the visible area of the user

You can view a example of this library from here

How Works

Lazy Blur Images works with base64 images to show a light preview while the real image is downloaded in the background, the image will be downloaded after the "load" event if it is in the visible area, by default the Intersection Observer API is used to detect if the image is in the visible area

Placeholder Studio

You can get and manipulate a placeholder from the official (and free) Placeholder Studio for this package

How to implement

We need to get our base64 small image from Placeholder Studio

<LazyBlurImage
  src="https://concepto.de/wp-content/uploads/2015/03/paisaje-e1549600034372.jpg"
  placeholder="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAADCAIAAADUVFKvAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAO0lEQVQImQEwAM//AHmap2iet1OeyIi2ysLS0QCKj4xsiIxujISipHLCsG4AbHN5VWNsXmRwWl9nYmZkbxkX08bVaG0AAAAASUVORK5CYII="
  alt="Some alt text"
  width={800}
  height={409}
  radio={1}
  scale={1.5}
  onComplete={() => {})}
  onError={() => {}}
/>

property	description	default
src	Image url	Manually
placeholder	Base64 Placeholder generated by the placeholder studio	Manually
alt	Alternative text	Manually
width	Image width	Manually
height	Image Height	Manually
scale	Custom css transform: scale() used to show the placeholder	1.5
radio	Custom css filter: blur() radio in pixels	20
onComplete	Callback called when the image is downloaded	Manually
onError	Callback called when the image can't be downloaded	Manually