react-component-lazy

A lightweight libraries for lazyload your Components, Images or anything.

Main function

- Lazyload your Components using IntersectionObserver
- Loading components with dynamic imports
- Lazyload your Components and loading components with dynamic imports once time
- Creating a great "Loading..." Component
- Creating a Error Alert

Lazyload your Components using IntersectionObserver

Load content that is visible on the screen.

``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}
`

Loading components with dynamic imports

`js
import {LazyImport} from 'react-component-lazy'
const Component = LazyImport(() => import('./Component'))

export default class App extends React.Component {
render() {
return (

)
}
}
`

Lazyload your Components and loading components with dynamic imports once time

`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})
`

Creating a great "Loading..." Component

You can customm default element, that is rendered before commponent loaded

`js
import {LazyVisible} from 'react-component-lazy'
const Component = LazyVisible(() => import('./Component'), {
height: 300,
loadding(){
return

}
})

export default class App extends React.Component {
render() {
return (

)
}
}
`

Creating a Error Alert

You can customm Error Alert, that is rendered when component load failed

`js
error(retry, error){
return (



)
}
``