Lazy load images
npm install --save use-progressive-image
yarn add use-progressive-image
import React from 'react';
import Header from './Header';
import {useProgressiveImage} from 'use-progressive-image';
const Cover = ({ image, className, isInverted, backgroundImage, children }) => {
const [loaded, placeholder] = useProgressiveImage(backgroundImage, image);
const imageStyle = backgroundImage
? { backgroundImage: `url(${loaded || placeholder})` }
: null;
return (
<div className={`cover ${className ? className : ''}`} style={imageStyle}>
<Header className={isInverted ? 'header--invert' : ''} />
<h1 className='cover__text'>{children}</h1>
{image && (
<div className='cover__image'>
<img src={image} alt='cover' />
</div>
)}
</div>
);
};
export default Cover;
MIT © [Oscar Fernández](https://github.com/Oscar Fernández)