@crave/farmblocks-image

A react component for thumbnail images

Stats

StarsIssuesVersionUpdatedCreatedSize
@crave/farmblocks-image
20253.2.1219 days ago4 years agoMinified + gzip package size for @crave/farmblocks-image in KB

Readme

logo-farmblocks

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

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.