static-uploader-react-img

Image React Component for Static Uploader (staticuploader.com)

React Example

yarn add static-uploader-react-img

import Img from 'static-uploader-react-img';

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

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

// aspect ratio image
export default () => {                                    
    return (
        <Img account="spec"
            aspectRatio='1:1'
            src="https://images.unsplash.com/photo-1604850613811-b50ad1aeeecd"
            width={500}/>
    );
};

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

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