吹き出しコンポーネントを作った

吹き出しコンポーネントが必要になって作った。

作ったもの

github.com

デモ

React-balloon example

スクリーンショット

f:id:bokuweb:20160301193300g:plain

使い方

インストール

npm i react-balloon

サンプル

以下のように使用する。

<Balloon
  start={{
    box: { x: 100, y: 100, width: 300, height: 105 },
    destination: { x: 400 , y: 400 },
  }}
  style={{ borderRadius: '5px' }}
  backgroundColor="#ECF0F1"
>
  Hello, World!!
</Balloon>

このコンポーネントについて

吹き出し部分をSVGで描画し、ボックスとは独立して吹き出しの指し先も動かせるようにした。SVGはこれまでやろうやろうと思いながら触れてなかったけど、reactとの相性はいい部類なんじゃないかって気がしてきている。

今回は以下のようにSVGを書いている

<svg width="100%" height="100%" style={{ zIndex }}>
    <path
        d={ `M ${base[0].x } ${ base[0].y }
                 Q ${ control.x } ${ control.y } ${ destination.x } ${ destination.y }
                 Q ${ control.x } ${ control.y } ${ base[1].x } ${ base[1].y}` }
        fill={ backgroundColor }
        stroke={ backgroundColor }
        strokeWidth={ 1 }
    />
</svg>