Skip to content

Instantly share code, notes, and snippets.

@sanishkr

sanishkr/Image.js

Last active March 22, 2025 22:57
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save sanishkr/7f520f227989133a779eb49726bc77cb to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save sanishkr/7f520f227989133a779eb49726bc77cb to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. sanishkr revised this gist Jan 14, 2020. 1 changed file with 0 additions and 1 deletion.
    1 change: 0 additions & 1 deletion Image.js
    View file
    Original file line number Diff line number Diff line change
    @@ -84,7 +84,6 @@ export default ({
    sizes={srcSetData.sizes}
    src={src}
    alt={alt}
    ref={ref}
    />
    )
    ) : (
  2. sanishkr revised this gist Jan 14, 2020. 1 changed file with 1 addition and 3 deletions.
    4 changes: 1 addition & 3 deletions Image.js
    View file
    Original file line number Diff line number Diff line change
    @@ -70,14 +70,13 @@ export default ({
    src={src}
    placeholder={placeholder}
    >
    {(src, ref, loading, srcSetData) => {
    {(src, loading, srcSetData) => {
    return !placeholder ? (
    loading ? (
    <PlcHolder
    src="data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' width%3D'200' height%3D'150' viewBox%3D'0 0 200 150'%2F%3E"
    w={width}
    h={height}
    ref={ref}
    />
    ) : (
    <StyledImage
    @@ -95,7 +94,6 @@ export default ({
    sizes={srcSetData.sizes}
    src={src}
    alt={alt}
    ref={ref}
    />
    );
    }}
  3. sanishkr created this gist Jan 6, 2020.
    105 changes: 105 additions & 0 deletions Image.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,105 @@
    import React from 'react';
    import ProgressiveImage from 'react-progressive-graceful-image';
    import styled from 'styled-components';

    const PlcHolder = styled.img`
    background: linear-gradient(
    to right,
    rgb(246, 247, 248) 0%,
    rgb(237, 238, 241) 20%,
    rgb(246, 247, 248) 40%,
    rgb(246, 247, 248) 100%
    );
    @keyframes placeHolderShimmer {
    0% {
    background-position: top right;
    }
    100% {
    background-position: top left;
    }
    }
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    position: absolute;
    background-size: 2250px 2250px !important;
    background-repeat: no-repeat !important;
    background-position: 0 0 !important;
    animation: placeHolderShimmer 1.5s ease-in-out infinite;
    `;
    const ImageParent = styled.div`
    position: relative;
    width: 100%;
    `;
    const StyledImage = styled.img`
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    position: absolute;
    `;

    export default ({
    width = 414,
    height = 184,
    srcSetData,
    src,
    placeholder,
    alt = 'Image',
    }) => {
    return (
    <ImageParent
    style={{
    paddingBottom: (height / width) * 100 + '%',
    }}
    >
    <ProgressiveImage
    srcSetData={{
    srcSet: srcSetData.srcSet,
    srcSet: srcSetData.sizes,
    }}
    src={src}
    placeholder={placeholder}
    >
    {(src, ref, loading, srcSetData) => {
    return !placeholder ? (
    loading ? (
    <PlcHolder
    src="data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' width%3D'200' height%3D'150' viewBox%3D'0 0 200 150'%2F%3E"
    w={width}
    h={height}
    ref={ref}
    />
    ) : (
    <StyledImage
    srcSet={srcSetData.srcSet}
    sizes={srcSetData.sizes}
    src={src}
    alt={alt}
    ref={ref}
    />
    )
    ) : (
    <StyledImage
    srcSet={srcSetData.srcSet}
    style={{ filter: loading ? 'blur(15px)' : 'blur(0px)' }}
    sizes={srcSetData.sizes}
    src={src}
    alt={alt}
    ref={ref}
    />
    );
    }}
    </ProgressiveImage>
    </ImageParent>
    );
    };