Farmblocks-Image
A React component for thumbnail images. See Storybook
Installation
npm install @crave/farmblocks-image
Spec
See it on zeplin: Thumbnails: https://scene.zeplin.io/project/595a9cd3b401bf1876faab27/screen/59f0df2fee4fbc85eccb17b1 Badges: https://scene.zeplin.io/project/595a9cd3b401bf1876faab27/screen/59f0df31bbc93198a853bbe2
Usage
import React from "react";
import ReactDOM from "react-dom";
import Image, { thumbnailSizes, badgeSizes } from "@crave/farmblocks-image";
const root = document.createElement("div");
const imageUrl =
"https://openclipart.org/image/300px/svg_to_png/290343/1510649016.png&disposition=attachment";
ReactDOM.render(<Image src={imageUrl} size={badgeSizes.LARGE} badge />, root);
document.body.appendChild(root);
API
Property | Description | Type |
---|---|---|
src | required, the URL of the image | string |
badge | make the image a circle | boolean |
borderRadius | the border radius of the image (it will be ignored if the badge prop is true) | string or number |
fit | how should the image fit the size (same options that the object-fit css attribute) | string |
height | the height of the image | string or number |
size | if your image uses the same size in pixels for width and height, you can use this shorthand | number |
width | the width of the image | string |
Table of sizes
Type | Value | Size result |
---|---|---|
badge - extra small | badgeSizes.X_SMALL |
16 px |
badge - small | badgeSizes.SMALL |
24 px |
badge - medium | badgeSizes.MEDIUM |
40 px |
badge - large | badgeSizes.LARGE |
56 px |
thumbnail - small | thumbnailSizes.SMALL |
40 px |
thumbnail - medium | thumbnailSizes.MEDIUM |
48 px |
thumbnail - large | thumbnailSizes.LARGE |
72 px |
thumbnail - extra large | thumbnailSizes.X_LARGE |
120 px |
thumbnail - huge | thumbnailSizes.HUGE |
240 px |
License
MIT