simple-image-cloud-image-react
TypeScript icon, indicating that this package has built-in type declarations

1.0.8 • Public • Published

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>
    );
};

Dependencies (0)

    Dev Dependencies (0)

      Package Sidebar

      Install

      npm i simple-image-cloud-image-react

      Weekly Downloads

      0

      Version

      1.0.8

      License

      MIT

      Unpacked Size

      63.1 kB

      Total Files

      6

      Last publish

      Collaborators

      • feliperohde