A lightweight libraries using IntersectionObserver for lazyload your Components, Images or anything.
npm install react-component-lazyreact-component-lazy``js
import LazyComponent from 'react-component-lazy'
import Component from './Component'
export default class App extends React.Component {
render() {
return (
)
}
}
//or
import {LazyComponent} from 'react-component-lazy'
const Component = LazyComponent(require('./Component'))
export default class App extends React.Component {
render() {
return (
)
}
}
`
#### Options
height
Default height before Component loaded (default: 500)
`js
return (
)
//or
const Component = LazyComponent(require('./Component'), {height: 300})
`
visible
Is component first time visible
`js`
return (
)
//or
const Component = LazyComponent(require('./Component'), {visible: true}
`js
import {LazyImport} from 'react-component-lazy'
const Component = LazyImport(() => import('./Component'))
export default class App extends React.Component {
render() {
return (
)
}
}
`
`js
import {LazyVisible} from 'react-component-lazy'
const Component = LazyVisible(() => import('./Component'))
export default class App extends React.Component {
render() {
return (
)
}
}
`
#### Options
height
Default height before Component loaded (default: 500)
`js
import {LazyVisible} from 'react-component-lazy'
const Component = LazyVisible(() => import('./Component'), {height: 300})
export default class App extends React.Component {
render() {
return (
)
}
}
`
retries
Auto retry load component when error. (default: 3)
`js`
const Component = LazyVisible(() => import('./Component'), {retries: 5})
delay
Delaytime for load component
`js`
const Component = LazyVisible(() => import('./Component'), {delay: 500})
`js
import {LazyVisible} from 'react-component-lazy'
const Component = LazyVisible(() => import('./Component'), {
height: 300,
loadding(){
return Loading...
}
})
export default class App extends React.Component {
render() {
return (
)
}
}
`
`js``
error(retry, error){
return (
warning
読み込みに失敗しました。もう一度お試しください。
)
}
