Introducing React Progressive Image


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.


We Are Formidable

Formidable is a Seattle-based consultancy and open source shop, with an emphasis on Node.js and React.js. We deploy a mixture of consulting, staff augmentation, and training to level up teams and solve engineering problems. Whether it’s transitioning walmart.com to React, moving speedtest.net off Flash, or helping a startup build and scale an MVP, we’re ready to help teams of any size.

Interested in hiring or working for us? Get in touch or view our careers page.