simple-image-cloud-image-react v1.0.8

Image React Component for SimpleImage Cloud (simpleimagecloud.com)

Full documentation:

https://docs.simpleimagecloud.com

Quick Sample

yarn add simple-image-cloud-image-react

import Image from 'simple-image-cloud-image-react';

// fit/contain image
export default () => {                                    
    return (
        <Image account="spec"
            src="https://images.unsplash.com/photo-1604850613811-b50ad1aeeecd"
            width={500}/>
    );
};

// fill/cover image
export default () => {                                    
    return (
        <Image account="spec"
            height={500}
            mode='fill'
            src="https://images.unsplash.com/photo-1604850613811-b50ad1aeeecd"
            width={500}/>
    );
};

// responsive image
export default () => {                                    
    return (
        <Image.Responsive account="spec"
            src="https://images.unsplash.com/photo-1604850613811-b50ad1aeeecd"
            style={{
                maxWidth: '100%'
            }}>
            {/* 0px - 480px, serve 500w image */}
            <Image viewport={480}
                width={500}/>
            {/* 480px - 768px, serve 900w image */}
            <Image viewport={768}
                width={900}/>
            {/* 768px and greater, serve 1200w image */}
            <Image width={1200}/>
        </Image.Responsive>
    );
};

// responsive image with variations
export default () => {
    return (
        <Image.Responsive account="spec"
            src="https://images.unsplash.com/photo-1604850613811-b50ad1aeeecd"
            style={{
                maxWidth: '100%'
            }}>
            {/* 0px - 480px, serve 500w image */}
            <Image focalPoint='top'
                viewport={480}
                width={500}/>
            {/* 480px - 768px, serve 900w image */}
            <Image focalPoint='top'
                viewport={768}
                width={900}/>
            {/* 768px and greater, serve 1200w image */}
            <Image width={1200}/>
        </Image.Responsive>
    );
};