@crave/farmblocks-image

3.2.12 • Public • Published

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

Readme

Keywords

none

Package Sidebar

Install

npm i @crave/farmblocks-image

Weekly Downloads

6

Version

3.2.12

License

MIT

Unpacked Size

20.3 kB

Total Files

11

Last publish

Collaborators

  • viniciusmartin
  • luis.nascimento
  • seocam
  • vnakamura
  • alcferreira
  • imwra