DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Welly
Welly

Posted on • Updated on

✨ A cool way to handle image lazy-loading, optimizing, UX with React.js

react-cool-img is a lightweight React <Img /> component, which helps you handle image UX (user experience) and performance optimization as a professional guy πŸ€“

It empowers the standard img tag by many cool features without breaking your original development experience. Ideally, it can be an img tag replacement for React.js.

⚑️ Live demo: https://react-cool-img.org

Support features:

  • πŸ–Ό Placeholders for satisfying various image loading states (e.g. loading image > actual image > error image).
  • πŸ›‹ Smart lazy loading with performant and efficient way, using Intersection Observer.
  • πŸ€– Built-in auto-retry mechanism. User won't miss out your important information.
  • 🚫 Aborts any current image downloads on component unmount potentially saving bandwidth and browser resources.
  • πŸ” Supports server-side rendering / Javascript is disabled / SEO.
  • πŸ“œ Supports TypeScript type definition.
  • πŸ¦” Tiny size (~ 2kB gzipped). No external dependencies, aside for the react and react-dom.
  • 🍰 Easy to use.

For more usage details checkout the project's GitHub page: https://github.com/wellyshen/react-cool-img.https://github.com/wellyshen/react-cool-starter

You can also install this package is distributed via npm.

$ yarn add react-cool-img
# or
$ npm install --save react-cool-img
Enter fullscreen mode Exit fullscreen mode

Top comments (2)

Collapse
 
fly profile image
joon

Exactly the module I've been looking for! Thanks a lot

Collapse
 
wellyshen profile image
Welly Author

You’re welcome bro 🀩

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.