Blurring Image

BlurringImage-emotion.jsx

import React, {useState} from 'react';
import styled from '@emotion/styled';
import Image from 'next/image';

export function BlurringImage({
  svg: [Svg, svgProps, rectangles],
  img,
  alt,
  style,
  blurLevel = 5,
  height = undefined,
  width = undefined,
  ...props
}) {
  const [hasPlaceholder, setHasPlaceholder] = useState(true);

  return (
    <Container style={style}>
      {hasPlaceholder && (
        <Svg
          {...svgProps}
          style={{
            ...svgProps.style,
            filter: `blur(${blurLevel}px)`,
          }}
        >
          {rectangles.map(([Rect, rectProps]) => (
            <Rect {...rectProps} key={`${rectProps.x} ${rectProps.y}`} />
          ))}
        </Svg>
      )}

      <Image
        {...img}
        {...props}
        height={height}
        width={width}
        alt={alt}
        onLoadingComplete={() => setHasPlaceholder(false)}
      />
    </Container>
  );
}

const Container = styled.div`
  position: relative;
  overflow: hidden;
  height: 100%;
  width: 100%;
`;

BlurringImage.jsx

import React, {useState} from 'react';
import styled from '@emotion/styled';
import Image from 'next/image';

export function BlurringImage({
  svg: [Svg, svgProps, rectangles],
  img,
  alt,
  style,
  blurLevel = 5,
  height = undefined,
  width = undefined,
  ...props
}) {
  const [hasPlaceholder, setHasPlaceholder] = useState(true);

  return (
    <Container style={style}>
      {hasPlaceholder && (
        <Svg
          {...svgProps}
          style={{
            ...svgProps.style,
            filter: `blur(${blurLevel}px)`,
          }}
        >
          {rectangles.map(([Rect, rectProps]) => (
            <Rect {...rectProps} key={`${rectProps.x} ${rectProps.y}`} />
          ))}
        </Svg>
      )}

      <Image
        {...img}
        {...props}
        height={height}
        width={width}
        alt={alt}
        onLoadingComplete={() => setHasPlaceholder(false)}
      />
    </Container>
  );
}


const Container = ({children}) => (
  <div
    style={{
      position: 'relative',
      overflow: 'hidden',
      height: '100%',
      width: '100%',
    }}
  >
    {children}
  </div>
);

BlurringImage.tsx

import React, {useState} from 'react';
import styled from '@emotion/styled';
import Image, {ImageProps} from 'next/image';
import {IGetPlaiceholderReturn} from 'plaiceholder';

type BlurringImageProps = {blurLevel?: number};

type Props = BlurringImageProps & {
  style?: React.CSSProperties;
} & Omit<ImageProps, 'src'> &
  Pick<IGetPlaiceholderReturn, 'svg' | 'img'>;

export function BlurringImage({
  svg: [Svg, svgProps, rectangles],
  img,
  alt,
  style,
  blurLevel = 5,
  height = undefined,
  width = undefined,
  ...props
}: Props) {
  const [hasPlaceholder, setHasPlaceholder] = useState(true);

  return (
    <Container style={style}>
      {hasPlaceholder && (
        <Svg
          {...svgProps}
          style={{
            ...svgProps.style,
            filter: `blur(${blurLevel}px)`,
          }}
        >
          {rectangles.map(([Rect, rectProps]) => (
            <Rect {...rectProps} key={`${rectProps.x} ${rectProps.y}`} />
          ))}
        </Svg>
      )}

      <Image
        {...img}
        {...props}
        height={height}
        width={width}
        alt={alt}
        onLoadingComplete={() => setHasPlaceholder(false)}
      />
    </Container>
  );
}

const Container = styled.div`
  position: relative;
  overflow: hidden;
  height: 100%;
  width: 100%;
`;

index.jsx

import {getPlaiceholder} from 'plaiceholder';
import {BlurringImage} from '../components/BlurringImage';

export default function IndexPage({img, svg}) {
  return (
    {/* <SomeHeaderComponent /> */}
    <BlurringImage
      img={img}
      svg={svg}
      layout="responsive"
      width={1200}
      height={800}
    />
  )
}

// or getServerSideProps depending on your needs
export async function getStaticProps() {
  const uri = 'https://i.imgur.com/gf3TZMr.jpeg;

  const {img, svg} = await getPlaiceholder(uri, {
    size: 64,
  });

  return {
    props: {
      img,
      svg,
    },
  }
}