Easy to use image component where the image takes up entire height and width of the containing element, while maintaining its aspect ratio by filling up extra space with blurred background.

Following Peer Dependency is required for using this library:

• react: ^16.12.0

npm install @tarragon/squarify-image --save

or

yarn add @tarragon/squarify-image

Checkout the basic usage here.

Make sure to use the component within a container element whose dimensions shall be inherited by the image.

<div className="img-container">
  <Squarify image={url} />
</div>

Import the Squarify component and pass the href property for the image.

• React
• TypeScript
• Webpack
• Emotion
• ❤️

Distributed under the MIT License. See LICENSE for more information.