
Security News
Browserslist-rs Gets Major Refactor, Cutting Binary Size by Over 1MB
Browserslist-rs now uses static data to reduce binary size by over 1MB, improving memory use and performance for Rust-based frontend tools.
react-lazy-media
Advanced tools
Lazy load image, picture, video, and iframe media React components
Lazy load image, picture, video, and iframe media React components. react-lazy-media uses yall-js under the hood to handle lazy loading.
Polyfilled with the Intersection Observer Polyfill
![]() ✔ |
![]() ✔ |
![]() 6+ |
![]() ✔ |
![]() 10+ |
![]() ✔ |
![]() 4.4+ |
npm i -S react-lazy-media
import React from 'react'
import { LazyImage } from 'react-lazy-media'
class Component extends React.Component {
render() {
return (
<LazyImage
classes={['myLazyImage']}
src={'./hero.png'}
/>
);
}
}
You can import LazyImage
LazyVideo
LazyIframe
LazyBackground
LazyWebpPicture
respectively.
The following APIs are shared by every component.
Name | Type | Default | Description |
---|---|---|---|
classes | Array | [] | Additional CSS classes (in addition to 'lazy' for the media element (img, video, iframe) |
id | string | '' | id for the media element (img, video, iframe) |
Lazy loads an image element. Supports loading a low-quality image placeholder.
Name | Type | Default | Description |
---|---|---|---|
alt | string | [] | Alt text for the img |
src | string (Required) | N/A - Required | src for the img |
width | string | '' | width for the img |
height | string | '' | height for the img |
lqip | string | '' | src for a loq quality image placeholder. will always be loaded and then replaced with actual src img |
Lazy loads a background image for a div.
Name | Type | Default | Description |
---|---|---|---|
src | string (Required) | N/A - Required | src for the background image |
Lazy loads an HTML5 video.
Name | Type | Default | Description |
---|---|---|---|
src | string (Required) | N/A - Required | src for the video |
width | string | '' | width for the video |
height | string | '' | height for the video |
poster | string | '' | poster image for the video (before it loads/plays) |
controls | bool | true | whether or not the video should display controls |
preload | bool | false | whether or not the video should be preloaded |
autoplay | bool | false | whether or not the video should autoplay |
loop | bool | false | whether or not the video should loop |
muted | bool | false | whether or not the video should be muted |
Lazy loads an iframe.
Name | Type | Default | Description |
---|---|---|---|
src | string (Required) | N/A - Required | src for the iframe |
Lazy loads an HTML5 picture. Attempts to load a Webp version of the asset first, and falls back to original src. Most of the props are passed down to the LazyImage
child of this component.
Name | Type | Default | Description |
---|---|---|---|
alt | string | [] | Alt text for the img |
src | string (Required) | N/A - Required | src for the img |
width | string | '' | width for the img |
height | string | '' | height for the img |
lqip | string | '' | src for a loq quality image placeholder. will always be loaded and then replaced with actual src img |
webp | string | '' | The webp src for the img. Will suffix the src prop of not provided (e.g. hero.png => hero.png.webp) |
[] Add more configurable component: LazyPicture [] Add code example for each component in readme
FAQs
Lazy load image, picture, video, and iframe media React components
We found that react-lazy-media demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Browserslist-rs now uses static data to reduce binary size by over 1MB, improving memory use and performance for Rust-based frontend tools.
Research
Security News
Eight new malicious Firefox extensions impersonate games, steal OAuth tokens, hijack sessions, and exploit browser permissions to spy on users.
Security News
The official Go SDK for the Model Context Protocol is in development, with a stable, production-ready release expected by August 2025.