Simple Image Cloud - Image for React

This component helps you integrate Simple Image Cloud - Image Component with your React App. It allows you to serve images from Simple Image Cloud CDN with transformations and variations easily.

• Install
• Documentation
• Quick Usage
  • Single Image - fit/contain
  • Single Image - fill/cover
  • Single Image - responsive
  • Single Image - responsive with variations
  • Multiple Images
  • Multiple Images - responsive
• Feedback

Install

yarn add @simpleimg/image-react

or

npm install @simpleimg/image-react

Documentation

You can find the documentation for the Image React Component here.

Quick Usage - Single Image - fit/contain

import Image from '@simpleimg/image-react';

export default () => {                                    
    return (
        <Image account="[YOUR_ACCOUNT_ID]"
            src="image-1.jpg"
            width={500}/>
    );
};

Quick Usage - Single Image - fill/cover

import Image from '@simpleimg/image-react';

export default () => {                                    
    return (
        <Image account="[YOUR_ACCOUNT_ID]"
            height={500}
            mode='fill'
            src="image-1.jpg"
            width={500}/>
    );
};

Quick Usage - Single Image - responsive

import Image from '@simpleimg/image-react';

export default () => {                                    
    return (
        <Image.Responsive account="[YOUR_ACCOUNT_ID]"
            src="image-1.jpg"
            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>
    );
};

Quick Usage - Single Image - responsive with variations

import Image from '@simpleimg/image-react';

export default () => {
    return (
        <Image.Responsive account="[YOUR_ACCOUNT_ID]"
            src="image-1.jpg"
            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>
    );
};

Quick Usage - Multiple Images

import Image from '@simpleimg/image-react';

export default () => {                                    
    return (
        <Image account="[YOUR_ACCOUNT_ID]"
            src={[{
				src: "image-1.jpg",
				width: 500
			}, {
				height: 500,
				mode: 'fill',
				src: "image-2.jpg",
				width: 500
			}]}
            width={500}/>
    );
};

Quick Usage - Multiple Images - responsive

import Image from '@simpleimg/image-react';

export default () => {
    return (
        <Image.Responsive account="[YOUR_ACCOUNT_ID]"
            src={[{
				src: "image-1.jpg"
			}, {
				src: "image-2.jpg"
			}]}
            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>
    );
};

Feedback

We want to hear your issue reports and feature requests at [email protected]