# @crave/farmblocks-image

> A react component for thumbnail images

Latest version **3.2.12** (published 2022-01-05) · MIT license · 0 weekly downloads

## Install

```sh
npm install @crave/farmblocks-image
pnpm add @crave/farmblocks-image
yarn add @crave/farmblocks-image
bun add @crave/farmblocks-image
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.2.12 |
| Published | 2022-01-05 |
| First published | 2017-11-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 19.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 20 |
| Author | Crave Food Systems and AUTHORS |
| Maintainers | viniciusmartin, luis.nascimento, seocam, vnakamura, alcferreira, imwra |

## Links

- npm: https://www.npmjs.com/package/@crave/farmblocks-image
- Repository: https://github.com/CraveFood/farmblocks
- Homepage: https://github.com/CraveFood/farmblocks#readme
- Issues: https://github.com/CraveFood/farmblocks/issues
- npm.io page: https://npm.io/package/@crave/farmblocks-image

## Dependencies (1)

- [@crave/farmblocks-theme](https://npm.io/package/@crave/farmblocks-theme.md) ^1.12.4

## Recent versions

- 3.2.12 (latest) — 2022-01-05
- 3.2.11-alpha-adjust-xsmall-font-size-value-6142.1.0 (canary) — 2021-08-11
- 3.2.11 — 2021-08-11
- 3.2.11-alpha-lerna-force-publish-6137.1.0 — 2021-07-26
- 3.2.8 — 2021-07-23
- 3.2.7 — 2021-07-07
- 3.2.7-alpha-add-font-size-6125.1.10 — 2021-07-07
- 3.2.6 — 2021-04-19
- 3.2.6-alpha-table-redesign-manual-1.11 — 2021-01-21
- 3.2.6-alpha-icon-publish-5935.1.5 — 2020-10-29
- 3.2.5 — 2020-10-21
- 3.2.5-alpha-esmodules-5925.1.15 — 2020-10-21
- 3.2.5-alpha-esmodules-5921.1.16 — 2020-10-15
- 3.2.5-alpha-esmodules-5917.1.15 — 2020-10-14
- 3.2.4 — 2020-09-04
- … 1111 more at https://npm.io/package/@crave/farmblocks-image/versions

## README

![logo-farmblocks](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)

# Farmblocks-Image

A React component for thumbnail images. See
[Storybook](https://cravefood.github.io/farmblocks/index.html?selectedKind=Image)

## 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

```jsx
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

---
_Source: https://npm.io/package/@crave/farmblocks-image · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._