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
andreact-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
Top comments (2)
Exactly the module I've been looking for! Thanks a lot
You’re welcome bro 🤩