ReactのUIメモ


ReactのUIに関するメモです。ぼちぼち追加していきます。


## Material-UI

[Material-UI](https://material-ui.com/)

メジャーどころ。Google、Materialが好きな、またはそれで問題ない場合には簡単に使えます。
TypeScriptで使うにはちょっと工夫要ります。


## Semantic UI React

[Semantic UI React](https://react.semantic-ui.com/introduction)

SemanticをRiactで扱うためのライブラリです。

ボタン1つとってみてもバリエーション多いです。

![image](https://qiita-image-store.s3.amazonaws.com/0/49910/b5f1a25c-182e-d621-6d7b-9926fdbef8d0.png)
![image](https://qiita-image-store.s3.amazonaws.com/0/49910/62768e9d-8666-5d24-f072-ab086f7ad7a6.png)
![image](https://qiita-image-store.s3.amazonaws.com/0/49910/724c1d4d-21a1-698a-2385-1f4994c01bff.png)
![image](https://qiita-image-store.s3.amazonaws.com/0/49910/6204d890-84dd-b529-22b5-52f0d4c630f7.png)
![image](https://qiita-image-store.s3.amazonaws.com/0/49910/84567f94-d19f-51d1-bc84-2abc7726d2ec.png)

## Grommet
[Grommet](http://grommet.io/)

HP（Hewlett Packard）が公開している、業務アプリケーション向けに作成されたUIコンポーネント
ラグジュアリーな雰囲気で、コンポーネントもかなり揃っています。
イメージは紫と○のようです。
<img src="https://s3.amazonaws.com/blog.invisionapp.com/uploads/2017/05/grommet_team-1024x853.jpg" width="200px" />

* [github](https://github.com/grommet/grommet)
* [Components | Grommet](http://grommet.io/docs/components)
* [サンプル](http://ferret.grommet.io/dashboard)


<img src="https://qiita-image-store.s3.amazonaws.com/0/49910/d4279f06-e2b1-8f1e-5c78-5d4e4d2a1c50.png" width="400px" />

地図コンポーネントがあるのがめずらしいです。
<img src="https://qiita-image-store.s3.amazonaws.com/0/49910/a8da6ef4-4bca-6f1a-6df1-3ab6851baa57.png" width="300px" />

メーターがあるのも業務向けといわれるとこでしょうか
<img src="https://qiita-image-store.s3.amazonaws.com/0/49910/b2bddf90-2726-8bca-cabe-2b1362549784.png" width="300px" />



## Ring UI

[Ring UI](http://jetbrains.org/ring-ui/branch/master/index.html)

jetbrainsが公開しているUIです。


日付選択の[date-picker](http://jetbrains.org/ring-ui/branch/master/date-picker.html)が特徴的です。

<img src="https://qiita-image-store.s3.amazonaws.com/0/49910/0db3dcaa-b77a-ebf6-0f19-d6fc8f135121.png" width="200" />

参考
[Ring UI - JetBrains製のUIコンポーネント集 MOONGIFT](https://www.moongift.jp/2017/08/ring-ui-jetbrains%e8%a3%bd%e3%81%aeui%e3%82%b3%e3%83%b3%e3%83%9d%e3%83%bc%e3%83%8d%e3%83%b3%e3%83%88%e9%9b%86/)


## Gestalt

[Gestalt](https://pinterest.github.io/gestalt/#/)

pinterestが公開しているUIです。
2018年2月から公開が始まったようです。

Masonryなどもあり、pinterestっぽい雰囲気のページにできます。

* [github](https://github.com/pinterest/gestalt)
* [動作サンプル](https://codesandbox.io/s/k5plvp9v8v)


<img src="https://qiita-image-store.s3.amazonaws.com/0/49910/e0cc45d4-e12a-e834-4166-76e1cee4adb2.png" width="300" />
![image](https://qiita-image-store.s3.amazonaws.com/0/49910/af9b8f85-4328-d6bc-f6ae-eb5ab703ab73.png)
<img src="https://qiita-image-store.s3.amazonaws.com/0/49910/1cc16608-10ed-0335-a4b9-7d411e3d84d6.png" width="300" />


# Contributions - 活性度

## 各UIの活性度が見えます。

* Material-UI
![image](https://qiita-image-store.s3.amazonaws.com/0/49910/a68c1a17-eedb-5a41-a988-7106841df7e0.png)

* Semantic UI React
![image](https://qiita-image-store.s3.amazonaws.com/0/49910/bb4c54fb-2b6e-3618-b792-e9f744030f0d.png)

* Ring UI
![image](https://qiita-image-store.s3.amazonaws.com/0/49910/ea22b27e-f5ad-b312-78b2-f5b91441ff73.png)

* Gestalt
![image](https://qiita-image-store.s3.amazonaws.com/0/49910/c1676611-4c81-38d6-c673-ca0a000a3e95.png)