Skip to content

Instantly share code, notes, and snippets.

@codegino
Last active June 29, 2022 14:20
Show Gist options
  • Save codegino/7464b6e6b699cbd485ec930cf836160d to your computer and use it in GitHub Desktop.
Save codegino/7464b6e6b699cbd485ec930cf836160d to your computer and use it in GitHub Desktop.
Blurring Image
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%;
`;
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>
);
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%;
`;
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,
},
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment