@crave/farmblocks-image

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