@crave/farmblocks-map-balloon

4.0.17 • Public • Published

logo-farmblocks

Farmblocks Map Balloon

A React component to display pictures and a caption over a map. See [Storybook](https://cravefood.github.io/farmblocks/index.html?selectedKind=Map Balloon)

Installation

npm install @crave/farmblocks-map-balloon

Usage

import React from "react";
import ReactDOM from "react-dom";
import MapBalloon from "@crave/farmblocks-map-balloon";

const root = document.createElement("div");

ReactDOM.render(
  <div
    style={{
      position: "relative",
      width: 500,
      height: 500,
      background: "lightcyan",
    }}
  >
    <MapBalloon
      x={50}
      y={400}
      open
      caption="My Farm"
      imageSet={[
        {
          name: "Strawberries",
          image: "https://source.unsplash.com/eCre0iMGtEA/800x800",
          // Photo by Clem Onojeghuo
        },
      ]}
    />
  </div>,
  root,
);

document.body.appendChild(root);

API

  • x: number (default: 0). The x position of the pin, in pixels.
  • y: number (default: 0). The y position of the pin, in pixels.
  • align: string (default: 'left') The alignment of the balloon relative to the pin. You can use our constants by importing the alignments object:
    • import MapBalloon, { alignments } from "@crave/farmblocks-map-balloon";
  • singleImage: string. Path for a single image to be displayed in a smaller balloon without caption.
  • caption: string (required if singleImage is not used). Text to show under the images.
  • imageSet: array (required if singleImage is not used). The list of images to be displayed on a balloon. Items should be objects with the following properties:
    • name: string (required). Text to show over the the image.
    • image: string (required). Path to product image.
  • open: boolean (default: 0). Defines if the balloon wil be visible. Otherwise only the pin will be rendered
  • animated: boolean (default: false). Defines if the balloon is animated or not
  • balloonSize: number (default: 260). Balloon size
  • borderRadius: string (default: 8px). Defines the balloon border radius
  • pinColor: string (default: #f1c618). Color to be set to the pin icon
  • pinHighlightColor: string (defaults to the pinColor value). Color to be set to the highlighted pin
  • pinSize: number (default: 40). Size to be set to the pin icon
  • opacity: number (default: 1)
  • captionSize: number (default: 18), Size of the caption text.
  • imageTextSize: number (default: 28), Size of the text overlay on images.
  • onPinClick: function. Called when the pin is clicked. If set, changes the pin visual into a round button
  • onBalloonClick: function. Called when the balloon is clicked. If set, adds an indicator to the balloon text.
  • value: any. A value that will be passed as first argument for onPinClick and onBalloonClick calls. This can be handy to identify which pin/balloon was clicked.

License

MIT

Readme

Keywords

Package Sidebar

Install

npm i @crave/farmblocks-map-balloon

Weekly Downloads

5

Version

4.0.17

License

MIT

Unpacked Size

16.3 kB

Total Files

14

Last publish

Collaborators

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