rc-progressive-image
rc-progressive-image
is a React component for lazy-loading and progressively rendering images, designed to enhance web performance.
Installation
You can install rc-progressive-image
using npm or yarn:
npm install rc-progressive-image --save
yarn add rc-progressive-image
Usage
Here's how to use rc-progressive-image in your React application:
import ProgressiveImage from 'rc-progressive-image';
function App() {
return (
<div>
<h1>Progressive Image Loading</h1>
<ProgressiveImage
src="your-image.jpg"
placeholder="placeholder.jpg"
alt="Image Alt Text"
className="image-class"
/>
</div>
);
}
export default App;
Props
- src (string, required): The source URL of the full-size image.
- placeholder (string, required): The source URL of a low-resolution placeholder image.
- alt (string, required): The alternative text for the image.
- className (string, optional): Additional CSS class name to apply to the image.