Contensis Image React Component

This package exists to aid with implementing the Contensis Image API in a React project.

Basic Usage

Output Image Element

<CImage source="{`PathToContensisHostedImage`}" altText="Example Image" />

Output background image container

<CImage source="{`PathToContensisHostedImage`}">
  {Children}
</CImage>

Props

Prop	Type	Description	Example
source	string	Path to Contensis hosted image	'/image-library/example.jpg'
altText	string	Alt text to appear on image when using element	'This an example image'
resolution	array	Screen resolution densities to support, as multiples of 72	[1, 2]
className	string	Class to apply to element	N/A
width	number	Pixel width to request image at from the API	200
height	number	Pixel height to request image at from the API	200
fit	string	Fit type of image resize	'contain'
background	string
rotation	number	Degrees to rotate the image by. [0 - 360]	90
quality	number	Visual quality to request image at. [1-100]	75
crop	string	Crop size and location. Can be coordinates in [w,h,x,y] or use shorthand [tl, t, tr, l, c, r, bl, b, br]	'200,200,50,100'
flip	string	Flip image on its axis. [vertical, v, hotizontal, h, both, b].	v
effect	string	Apply an effect to the image	'grayscale'
blur	number	Level of blur to apply to the image. [0 - 100].	20
format	string	Image format to request image back as.	'webp'