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
- Feedback
yarn add @simpleimg/image-react
or
npm install @simpleimg/image-react
You can find the documentation for the Image React Component here.
import Image from '@simpleimg/image-react';
export default () => {
return (
<Image account="[YOUR_ACCOUNT_ID]"
src="image-1.jpg"
width={500}/>
);
};
import Image from '@simpleimg/image-react';
export default () => {
return (
<Image account="[YOUR_ACCOUNT_ID]"
height={500}
mode='fill'
src="image-1.jpg"
width={500}/>
);
};
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>
);
};
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>
);
};
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}/>
);
};
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>
);
};
We want to hear your issue reports and feature requests at support@simpleimagecloud.com