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' |