Introducing React Progressive Image

3 October 2016

By
Formidable Icon

Brandon Dail

Progressive Image Loading Made Easy

Images can be big, and big can be bad on slow networks. Nobody wants to stare at whitespace while their network struggles to load your beautiful background image, so what can we do?

That’s where progressive image loading comes in. Progressive image loading can be the difference between a blank page and a smooth user experience. That’s why we made react-progressive-image, a small React component that lets you render a smaller or inlined version of your image, or a loading icon (or anything else!) while your actual image is loaded in the background.

react-progressive-image has a single export, ProgressiveImage, that takes a src and placeholder prop and asks that you provide a function as the only child. This function will be called with placeholder when the src image hasn’t loaded yet, and src when it has.

<ProgressiveImage src='beautiful-hero.jpg' placeholder='inlined-or-small-hero.jpg'>
  {(image) => <Hero src={image} />}
</ProgressiveImage>

Requiring a function that takes the active image and returns the active children makes <ProgressiveImage/> extremely flexible.
You can render an <img/> directly, pass the active image to another component, use it as a backgroundImage, or anything else you
could possibly think of.

We hope this will make progressive easier for everyone, as a progressive user experience is a good user experience.

View the source code for React-Progressive-Image.

Related Posts

Finding and fixing duplicates in webpack with Insp ...

Needlessly duplicated dependencies produce larger, slower web applications. Let's embark on a deep dive into how npm and webpack work, see how ineffic ...

Introducing Whackage

We love React Native. Sometimes, though, it doesn't feel like it reciprocates your love. One such time is when working with codebases that span across ...

By
Jani Eväkallio

Jani Eväkallio

Flexible Charting in React with Victory (and Intro ...

Victory: React charts tailored to your data Charting directly with d3 can be difficult, but other libraries are often too simplistic. Enter Victory: R ...