Repository files navigation

Lazyload your React component and nicely fade in when it's ready.

Try the demo

You have a slow component like a large image or complex widget, but want to keep your webapp fast.

You could usereact-lazyload to render that component only when it's on screen, but it looks weird when your component just pops up. You can add a CSS transition, but it's over before your component loads, so it still pops into view abruptly.

Withreact-lazyload-fadein, you're still usingreact-lazyload and get all of its benefits, but your components look great when they load. Automatically wait until the component is ready to start the FadeIn transition.

• Take performance in mind, only 2 event listeners for all lazy-loaded components
• Support bothone-time lazy load andcontinuous lazy load mode
• scroll /resize event handler is throttled so you won't suffer frequent update, you can switch to debounce mode too
• Server Side Rendering friendly

$ yarn add react-lazyload-fadein

react-lazyload-fadein supports both function-as-children and render-props paterns.

In both cases<FadeIn> passes anonLoad callback to your render method so you can start the fade transition when you're ready. Use the defaultonLoad event for images.

importReactfrom"react";importFadeInfrom"react-lazyload-fadein";

Pass a function as children to specify rendering. Use the onload callback to start the fadein effect

constFunctionAsChildren=()=>(<div><FadeInheight={600}>{onload=>(<imgsrc="https://images.unsplash.com/photo-1494236581341-7d38b2e7d824?ixlib=rb-0.3.5&s=ff97ff4fafca298502452a45ea012698&auto=format&fit=crop&w=1888&q=80"onLoad={onload}style={{height:600}}/>)}</FadeIn></div>);

If you prefer render props, you can use those as well. Everything else works the same

constRenderProp=()=>(<FadeInheight={600}render={onload=>(<imgsrc="https://images.unsplash.com/photo-1508606572321-901ea443707f?ixlib=rb-0.3.5&s=445c447b4e24f8ffa34df0c0edb2d2bc&auto=format&fit=crop&w=932&q=80"onLoad={onload}style={{height:600}}/>)}/>);

Your render function can be anything. Add some meta info to your image that fades in at the same time.

constWithMetaInfo=()=>(<FadeInheight={600}>{onload=>(<div><h3>Photo By Ivan Dodig</h3><imgsrc="https://images.unsplash.com/photo-1504439904031-93ded9f93e4e?ixlib=rb-0.3.5&s=b7afd4dd0f755f1a465b617ad13da628&auto=format&fit=crop&w=976&q=80"onLoad={onload}style={{height:500}}/><p>Mirca, Croatia</p></div>)}</FadeIn>);

You can even go beyond images. For example, a dataviz component that needs to load data before it renders.

classPopulationChartextendsComponent{// load data in componentDidMount()// render chart in render()}constDataviz=()=>(<FadeInheight={600}>{onload=><PopulationChartonLoad={onload}/>}</FadeIn>);

You can then render those lazyloaded fadein components as usual.

classDemoextendsComponent{render(){return(<div><h1>react-lazyload-fadein examples</h1><FunctionAsChildren/><RenderProp/><WithMetaInfo/><NonImageExample/></div>);}}

you can also change the duration and the easing animation.

constPost=()=>(<FadeInheight={600}duration={100}easing={'ease-out'}>{onload=>(<PostTitle>react-lazyload-fadein examples</PostTitle><PostBodycontent={content}/>)}</FadeIn>);

You should aware that your component will only be mounted when it's visible in viewport, before that a placeholder will be rendered.

So you can safely send request in your component's componentDidMount without worrying about performance loss. When you're ready, call theonload callback and that starts the fade in transition.

Every prop fromreact-lazyload (height, once, offset, scroll, resize, overflow, placeholder, unmuntIfInvisible, debounce/throttle)

Type: Number, Default: 500

fade animation duration speed. default unit is millisecond.

Type: String, Default: 'ease-in-out'

fade animation easing type. support easing type isCSS transition-timing-function

Type: Number, Default: 150

Say if you want to preload a component N pixels below the viewport. I found 150px to be a good default to give components some time to load before users reach them.

Type: Function Default: undefined

Specify what you want to render, if you like render props.

Type: Function Default: undefined

Specify what you want to render, if you like function-as-children.