4.0.17 • Published 3 years ago

@crave/farmblocks-map-balloon v4.0.17

Weekly downloads
2,196
License
MIT
Repository
github
Last release
3 years ago

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

4.0.17

3 years ago

4.0.16

3 years ago

4.0.15

4 years ago

4.0.14

4 years ago

4.0.11

4 years ago

4.0.10

4 years ago

4.0.9

4 years ago

4.0.8

4 years ago

4.0.7

4 years ago

4.0.6

4 years ago

4.0.5

5 years ago

4.0.4

5 years ago

4.0.3

5 years ago

4.0.2

5 years ago

4.0.1

5 years ago

4.0.0

5 years ago

3.6.17

5 years ago

3.6.16

5 years ago

3.6.15

5 years ago

3.6.14

5 years ago

3.6.13

5 years ago

3.6.12

5 years ago

3.6.11

5 years ago

3.6.10

5 years ago

3.6.9

6 years ago

3.6.8

6 years ago

3.6.7

6 years ago

3.6.6

6 years ago

3.6.5

6 years ago

3.6.4

6 years ago

3.6.2

6 years ago

3.6.3

6 years ago

3.6.1

6 years ago

3.6.0

6 years ago

3.5.0

6 years ago

3.4.9

6 years ago

3.4.8

6 years ago

3.4.7

6 years ago

3.4.6

6 years ago

3.4.5

6 years ago

3.4.4

6 years ago

3.4.3

6 years ago

3.4.2

6 years ago

3.4.1

6 years ago

3.4.0

6 years ago

3.3.1

6 years ago

3.3.0

6 years ago

3.2.5

6 years ago

3.2.4

6 years ago

3.2.3

6 years ago

3.2.3-alpha.9

6 years ago

3.2.3-4211.1.8

6 years ago

3.2.3-4212.1.8

6 years ago

3.2.3-4209.1.8

6 years ago

3.2.3-4208.1.8

6 years ago

3.2.3-alpha.5

6 years ago

3.2.1-alpha.12

6 years ago

3.2.1-alpha.14

6 years ago

3.2.2

6 years ago

3.2.2-alpha.26

6 years ago

3.2.1

6 years ago

3.2.0

6 years ago

3.1.2-alpha.1

6 years ago

3.1.1

6 years ago

3.1.1-alpha.13

6 years ago

3.1.1-alpha.12

6 years ago

3.1.0

7 years ago

3.0.11-alpha.4

7 years ago

3.0.11-alpha.9

7 years ago

3.0.11-alpha.7

7 years ago

3.0.10

7 years ago

3.0.9

7 years ago

3.0.8

7 years ago

3.0.7

7 years ago

3.0.6

7 years ago

3.0.5

7 years ago

3.0.4

7 years ago

3.0.3

7 years ago

3.0.2

7 years ago

3.0.1

7 years ago

3.0.0

7 years ago

2.0.18

7 years ago

2.0.17

7 years ago

2.0.16

7 years ago

2.0.15

7 years ago

2.0.14

7 years ago

2.0.13

7 years ago

2.0.12

7 years ago

2.0.11

7 years ago

2.0.10

7 years ago

2.0.9

7 years ago

2.0.8

7 years ago

2.0.7

7 years ago

2.0.6

7 years ago

2.0.5

7 years ago

2.0.4

7 years ago

2.0.3

7 years ago

2.0.3-alpha.12

7 years ago

2.0.2

7 years ago

2.0.1

7 years ago

2.0.0

7 years ago

1.2.15

7 years ago

1.2.14

7 years ago

1.2.13

7 years ago

1.2.12

7 years ago

1.2.11

7 years ago

1.2.10

7 years ago

1.2.9

7 years ago

1.2.8

7 years ago

1.2.7

7 years ago

1.2.6

7 years ago

1.2.5

7 years ago

1.2.4

7 years ago

1.2.3

7 years ago

1.2.2

7 years ago

1.2.1

7 years ago

1.2.0

7 years ago

1.1.0

7 years ago

1.0.3

7 years ago

1.0.2

7 years ago

1.0.1

7 years ago

1.0.0

7 years ago

0.2.1

7 years ago

0.2.0

7 years ago