@tarragon/squarify-image

[![Build Status][build-shield]]()
[![MIT License][license-shield]][license-url]
[![Contributors][contributors-shield]]()

[![LinkedIn][linkedin-shield]][linkedin-url]

Squarify Image

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.

Getting Started

$3

Following Peer Dependency is required for using this library:

- react: ^16.12.0

$3

``
npm install @tarragon/squarify-image --save
`

or

`
yarn add @tarragon/squarify-image
`

Usage

$3

Checkout the basic usage here.


$3

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

`jsx



`

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

Built With

- React
- TypeScript
- Webpack
- Emotion
- ❤️

License

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

[build-shield]: https://img.shields.io/badge/build-passing-brightgreen.svg?style=for-the-badge
[contributors-shield]: https://img.shields.io/badge/contributors-1-orange.svg?style=for-the-badge
[license-shield]: https://img.shields.io/badge/license-MIT-blue.svg?style=for-the-badge
[license-url]: https://choosealicense.com/licenses/mit
[linkedin-shield]: https://img.shields.io/badge/-LinkedIn-black.svg?style=for-the-badge&logo=linkedin&colorB=0077B5
[linkedin-url]: https://www.linkedin.com/in/shreya-tiwari/
[product-screenshot]: https://user-images.githubusercontent.com/4329912/59576904-0d7e5280-90df-11e9-868d-dec257ed1626.png