Nearly Perfected Mystique

    @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

    Keywords

    none

    Install

    npm i @crave/farmblocks-image

    DownloadsWeekly Downloads

    10

    Version

    3.2.12

    License

    MIT

    Unpacked Size

    20.3 kB

    Total Files

    11

    Last publish

    Collaborators

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