README
useNativeLazyLoading
Detect if the browser supports the new loading
attribute on Image elements.
Combine this with react-intersection-observer
to lazy load images with a fallback method.
Checkout the Storybook demo.
Installation
yarn add @charlietango/use-native-lazy-loading
API
const supported = useNativeLazyLoading(initialSupported)
Example
Example of how to combine this with react-intersction-observer
, to create a lazy loaded image.
import React from 'react'
import useNativeLazyLoading from '@charlietango/use-native-lazy-loading'
import { useInView } from 'react-intersection-observer'
const LazyImage = ({ width, height, src, ...rest }) => {
const supportsLazyLoading = useNativeLazyLoading()
const [ref, inView] = useInView({
triggerOnce: true,
skip: supportsLazyLoading !== false,
})
return (
<div
ref={ref}
style={{
position: 'relative',
paddingBottom: `${(height / width) * 100}%`,
background: '#2a4b7a',
}}
>
{inView || supportsLazyLoading ? (
<img
{...rest}
src={src}
alt="Placeholder kitten"
loading="lazy"
style={{ position: 'absolute', width: '100%', height: '100%' }}
/>
) : null}
</div>
)
}
export default LazyImage