relaze
Tiny image lazy loading library for React. 800 bytes gzipped.
Features
- Single higher-order component
- Performant scrolling using
requestAnimationFrame - Supports
srcset - Universal
Install
npm i relaze --saveUsage
Create a reusable image component:
// Image.js
import relaze from 'relaze'
export default relaze(({ src, srcSet }) => (
<img src={src} srcSet={srcSet} />
))Pass it a src and a srcSet prop (optional):
import Image from './Image.js'
<Image src='image.jpg' srcSet='image.jpg 600w, image-large.jpg 1200w' />When the image enters the viewport, Relaze will pass the src and srcSet
props to its child component.
Fade-in Image
// Image.js
import relaze from 'relaze'
import cx from 'classnames'
class Image extends React.Component {
constructor(props) {
super(props)
this.state = { loaded: false }
}
render() {
const { loaded } = this.state
const { src, srcSet } = this.props
return (
<img
src={src}
srcSet={srcSet}
className={cx({
'is-loaded': loaded
})}
onLoad={e => {
this.setState({
loaded: true
})
}} />
)
}
}
export default relaze(Image)Background Image
import relaze from 'relaze'
export default relaze(({ src }) => (
<div style={{
backgroundImage: `url(${src})`
}} />
))Adjusting Threshold
A fraction of the viewport height. Positive values makes image load sooner, negative values makes image load later.
import Image from './Image.js'
<Image src='image.jpg' threshold={0.2} />License
MIT License © Eric Bailey