55 lines
1.1 KiB
JavaScript
55 lines
1.1 KiB
JavaScript
import React from 'react'
|
|
import 'intersection-observer'
|
|
import Observer from '@researchgate/react-intersection-observer'
|
|
|
|
import './LazyEmbed.css'
|
|
|
|
class LazyEmbed extends React.Component {
|
|
static defaultProps = {
|
|
lazy: true
|
|
}
|
|
|
|
state = {
|
|
src: null,
|
|
dataSrc: this.props.src,
|
|
loaded: !this.props.lazy
|
|
}
|
|
|
|
handleIntersection = e => {
|
|
if (e.isIntersecting) {
|
|
this.setState({
|
|
src: this.state.dataSrc,
|
|
loaded: true
|
|
})
|
|
}
|
|
}
|
|
|
|
componentWillReceiveProps (nextProps) {
|
|
if (this.props.src === nextProps.src) return
|
|
this.setState({
|
|
src: nextProps.src,
|
|
dataSrc: nextProps.src
|
|
})
|
|
}
|
|
|
|
render () {
|
|
let className = this.props.className || ''
|
|
if (this.state.loaded) className += ' loaded'
|
|
const options = {
|
|
onChange: this.handleIntersection,
|
|
onlyOnce: true,
|
|
rootMargin: '0% 0% 100%'
|
|
}
|
|
|
|
return (
|
|
<Observer {...options}>
|
|
<div
|
|
className={`LazyEmbed ${className}`}
|
|
dangerouslySetInnerHTML={{ __html: this.state.src }}
|
|
/>
|
|
</Observer>
|
|
)
|
|
}
|
|
}
|
|
|
|
export default LazyEmbed
|