@crave/farmblocks-map-balloon NPM

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

farmblocks react

@crave/farmblocks-card @crave/farmblocks-image @crave/farmblocks-text @crave/farmblocks-theme object.values react-transition-group

@everything-registry/sub-chunk-202 @zalastax/nolb-_cra @infinitebrahmanuniverse/nolb-_cra

4.0.17

2 years ago

4.0.17-alpha-test-rr-6245.1.0

2 years ago

4.0.17-alpha-test-rr-6243.1.0

2 years ago

4.0.15-alpha-update-deps-6179.1.10

2 years ago

4.0.16

2 years ago

4.0.15

2 years ago

4.0.16-alpha-fix-deps-6232.1.2

2 years ago

4.0.14

3 years ago

4.0.14-alpha-adjust-xsmall-font-size-value-6142.1.0

3 years ago

4.0.14-alpha-lerna-force-publish-6137.1.0

3 years ago

4.0.11

3 years ago

4.0.10

3 years ago

4.0.10-alpha-add-font-size-6125.1.7

3 years ago

4.0.9-alpha-update-icons-6070.1.4

3 years ago

4.0.9-alpha-update-icons-1.4

3 years ago

4.0.9

3 years ago

4.0.8

3 years ago

4.0.9-alpha-update-icons-2.4

3 years ago

4.0.9-alpha-update-icons-6066.1.4

3 years ago

4.0.8-alpha-update-deps-032021-6038.1.36

3 years ago

4.0.8-alpha-update-deps-032021-6014.1.20

3 years ago

4.0.8-alpha-update-deps-032021-6011.1.17

3 years ago

4.0.7

3 years ago

4.0.7-alpha-empty-state-styles-5989.1.2

3 years ago

4.0.7-alpha-empty-state-styles-5986.1.2

3 years ago

4.0.6

3 years ago

4.0.6-alpha-fix-empty-state-proptype-5977.1.20

3 years ago

4.0.6-alpha-table-redesign-manual-1.8

3 years ago

4.0.5

4 years ago

4.0.5-alpha-icon-publish-5935.1.5

4 years ago

4.0.4-alpha-esmodules-5925.1.9

4 years ago

4.0.4

4 years ago

4.0.4-alpha-esmodules-5921.1.10

4 years ago

4.0.4-alpha-esmodules-5917.1.9

4 years ago

4.0.3

4 years ago

4.0.3-alpha-button-line-height-5901.1.2

4 years ago

4.0.2-alpha-fix-button-white-space-5898.1.2

4 years ago

4.0.2

4 years ago

4.0.2-alpha-fix-button-white-space-5896.1.2

4 years ago

4.0.1

4 years ago

4.0.1-alpha-button-redesign-5892.1.22

4 years ago

4.0.1-alpha-button-redesign-5888.1.26

4 years ago

4.0.1-alpha-button-redesign-5890.1.26

4 years ago

4.0.1-alpha-button-redesign-5884.1.23

4 years ago

4.0.1-alpha-protected-currency-5867.1.9

4 years ago

4.0.0

4 years ago

3.6.18-alpha-another-icon-test-5832.1.6

4 years ago

3.6.18-alpha-another-icon-test-5829.1.4

4 years ago

3.6.18-alpha-fix-github-dribbble-icons-5818.1.1

4 years ago

3.6.18-alpha-fix-icons-react-import-5816.1.3

4 years ago

3.6.18-alpha-fix-icons-react-import-5814.1.2

4 years ago

3.6.18-alpha-fix-icons-react-import-5812.1.4

4 years ago

3.6.18-alpha-fix-icons-react-import-5810.1.3

4 years ago

3.6.18-alpha-fix-icons-react-import-5808.1.2

4 years ago

3.6.17

4 years ago

3.6.17-alpha-dropdown-button-props-5805.1.3

4 years ago

3.6.16

4 years ago

3.6.16-alpha-redesign-form-fields-5789.1.7

4 years ago

3.6.16-alpha-redesign-form-fields-5777.1.6

4 years ago

3.6.16-alpha-redesign-form-fields-5774.1.4

4 years ago

3.6.16-alpha-redesign-form-fields-5775.1.6

4 years ago

3.6.15-alpha-redesign-form-fields-5772.1.8

4 years ago

3.6.15

4 years ago

3.6.15-alpha-new-label-5765.1.5

4 years ago

3.6.15-alpha-redesign-form-fields-5753.1.9

4 years ago

3.6.15-alpha-redesign-form-fields-5751.1.9

4 years ago

3.6.15-alpha-new-label-5742.1.5

4 years ago

3.6.14

4 years ago

3.6.13

4 years ago

3.6.12

4 years ago

3.6.12-alpha-upd-dep-280220-5690.1.28

4 years ago

3.6.11

4 years ago

3.6.11-alpha-card-border-5673.1.3

4 years ago

3.6.11-alpha-card-border-5671.1.2

4 years ago

3.6.10

4 years ago

3.6.10-alpha-responsive-text-5665.1.6

4 years ago

3.6.9-alpha-new-primary-button-colors-5656.1.2

4 years ago

3.6.9

4 years ago

3.6.8-alpha-link-fontweight-5650.1.2

4 years ago

3.6.8

4 years ago

3.6.7

4 years ago

3.6.7-alpha-image-with-box-shadow-5646.1.2

4 years ago

3.6.6

4 years ago

3.6.5-alpha-tangerine-5635.1.1

4 years ago

3.6.5

4 years ago

3.6.4-alpha-fix-proptype-warning-5631.1.1

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

3.6.1-alpha-responsive-modal-5603.1.10

4 years ago

3.6.1-alpha-mobile-tooltip-5599.1.14

4 years ago

3.6.1-alpha-responsive-modal-5591.1.7

4 years ago

3.6.1-alpha-mobile-tooltip-5579.1.12

4 years ago

3.5.1-alpha-use-new-icons-5576.1.28

4 years ago

3.6.0

4 years ago

3.5.1-alpha-use-new-icons-5574.1.34

4 years ago

3.5.1-alpha-use-new-icons-5568.1.29

4 years ago

3.5.1-alpha-mobile-tooltip-5561.1.12

4 years ago

3.5.1-alpha-use-new-icons-5553.1.26

4 years ago

3.5.1-alpha-mobile-tooltip-5545.1.5

4 years ago

3.5.0

4 years ago

3.4.10-alpha-use-new-icons-5530.1.24

4 years ago

3.4.10-alpha-mobile-tooltip-5522.1.5

4 years ago

3.4.9

5 years ago

3.4.9-alpha-side-nav-js-5441.1.50

5 years ago

3.4.8

5 years ago

3.4.8-alpha-fix-image-proptype-5388.1.14

5 years ago

3.4.8-alpha-fix-image-proptype-5356.1.12

5 years ago

3.4.8-alpha-fix-image-proptype-5327.1.12

5 years ago

3.4.7

5 years ago

3.4.7-alpha-fix-image-overflow-5243.1.8

5 years ago

3.4.6

5 years ago

3.4.5

5 years ago

3.4.5-alpha-image-use-img-5213.1.7

5 years ago

3.4.5-alpha-image-use-img-5211.1.20

5 years ago

3.4.5-alpha-fix-tooltip-auto-position-5199.1.4

5 years ago

3.4.5-alpha-image-use-img-5193.1.17

5 years ago

3.4.5-alpha-image-use-img-5185.1.8

5 years ago

3.4.5-alpha-image-use-img-5177.1.5

5 years ago

3.4.5-alpha-image-use-img-5173.1.4

5 years ago

3.4.5-alpha-image-use-img-5161.1.4

5 years ago

3.4.4-alpha-image-use-img-5159.1.30

5 years ago

3.4.4

5 years ago

3.4.4-alpha-update-deps-5137.1.24

5 years ago

3.4.4-alpha-update-deps-5135.1.24

5 years ago

3.4.3

5 years ago

3.4.3-alpha-fix-empty-state-buttons-4986.1.5

5 years ago

3.4.3-alpha-fix-empty-state-buttons-4980.1.4

5 years ago

3.4.2

5 years ago

3.4.2-alpha-tooltip-position-4957.1.32

5 years ago

3.4.2-alpha-tooltip-position-4915.1.30

5 years ago

3.4.2-alpha-tooltip-position-4886.1.19

5 years ago

3.4.2-alpha-tooltip-position-4885.1.21

5 years ago

3.4.1

5 years ago

3.4.1-alpha-upd-deps-4827.1.21

5 years ago

3.4.1-alpha-upd-deps-4825.1.23

5 years ago

3.4.1-alpha-upd-deps-4809.1.19

5 years ago

3.4.0

5 years ago

3.3.2-alpha-text-truncate-4717.1.7

5 years ago

3.3.2-alpha-text-truncate-4715.1.6

5 years ago

3.3.2-alpha-text-truncate-4713.1.6

5 years ago

3.3.2-alpha-text-truncate-4711.1.6

5 years ago

3.3.2-alpha-text-truncate-4709.1.4

5 years ago

3.3.1

5 years ago

3.3.1-alpha-modal-tweaks-4662.1.12

5 years ago

3.3.0

5 years ago

3.2.6-alpha-extendable.37

5 years ago

3.2.6-alpha-extendable.39

5 years ago

3.2.6-alpha-extendable.34

5 years ago

3.2.5

5 years ago

3.2.5-alpha-storybook-images.12

5 years ago

3.2.4

5 years ago

3.2.4-alpha-multi-select.22

5 years ago

3.2.4-alpha-multi-select.16

5 years ago

3.2.3

5 years ago

3.2.3-alpha-percy-andre.14

5 years ago

3.2.3-alpha-percy-andre.13

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago