浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【react】react-tagcloudの使用感について

snsでバズっているワードをタグクラウドで出したくてjqueryとかで色々探していたのですがjqueryプラグイン

同士の競り合いを起こしたり古いバージョンのjqueryが必要だったりとやたらと面倒だったのでnpmの

react-tagcloudというプラグインの力を少しお借りしました。

名前の通りreact向けにタグクラウドを生成してくれるnpmのパッケージで、規約(決まったコード)が少ない

ので比較的自由度が高く少しのアレンジでタグクラウドをカスタマイズすることができます。

 

</pre>
--------render------

const values = ["like vegetable", "like meet", "like fish"];
const data = [];
for(i=0; i < values.length; i++){
data[i] = { value: values[i], count: 5 };
};

--------return-------

<TagCloud minSize={5}
maxSize={35}
tags={data}
onClick={tag => this.tagClick(`'${tag.value}'`)} />
<pre>

 

これは配列に格納した値を順にTagCloudのプロパティに設定するだけのコードです。

(自作ですがconosle.logで最終的に値を取れたので載せておきます)

render内でdata[i] = { value: values[i], count: 5 };と二つのオプションがありますが、valueは

タグにしたい文字列、countはタグの大きさを指定しています。20でもかなり大きいので10前後にして

おいたほうが見栄えがいいかもです。

 

次にTagCloud内の説明になりますが、tags={data}で上でぶん回した配列の値を指定しています。

onClickの書き方がちょっと特殊で処理内に`’${tag.value}’`と書いてありますが

これは格納してあったタグの値つまり”like vegetable”, “like meet”, “like fish”を指定しており、処理も

値別に分けることができます。

 

簡単な説明ですが以上になります。

このコード量でタグクラウドの基本的な動きを抑えられるので、ブラウザで化けなければ採用できるかもです。

タグクラウドのプラグインの中でも一番わかりやすくて余計なことが書いていないので、同じような

機能を探している人におすすめのプラグインです。

 

  • この記事いいね! (0)