mottox2 blog

ReactのUIコンポーネントライブラリに「Sancho UI」はいかが?

devreactemotion

GW満喫していますか?私はNext.jsとCloud Functionsを組み合わせたり、FirebaseをバックエンドとしたSPAの検証や、SwiftでiOSアプリを書いて満喫しています。

こういった検証にありがちなのですが、「実現可能か?」という観点で作っているアプリケーションであっても、UIがショボいとやる気が削がれませんか?
自分はUI寄りのJSerなので、UIに気合が入ってないと、実装の気合も入りません。

とはいえ、ReactのUIコンポーネントライブラリにありがちなのですが、ライブラリを入れるためにwebpackの設定が必要なものもあります。

そういった理由から、いままで自分はCSSフルスクラッチ派でした。しかし、このGWにそれなりに見栄えがよく、設定がほとんど必要のない「Sancho UI」というUIコンポーネントライブラリを見つけて心変わりする程度には気に入ったので紹介します。

Sancho UIの紹介と強み

sancho-ui.com_.png (603.4 kB)

https://sancho-ui.com/

Sancho UIは Emotion と TypeScript で書かれたUIコンポーネントライブラリです。
CSS in JSライブラリのEmotionで書かれていることが重要で、自分のよく使うライブラリでほとんどのアプリケーションに導入しているので設定が必要ありません。
導入していなくても、emotionをインストールすれば利用が可能になります。
(2系は先日リリースされたばっかりで、まだ安定していないので1系を指定しています。)

shell
$ npm install sancho@1.2.3 @emotion/core @emotion/css

また、TypeScriptで書かれていることもあり、型定義もバッチリです。ドキュメントを見ずとも、型定義ファイルを見に行くだけで、どういったプロパティを渡せばいいかわかるのもポイントです。

コンポーネント例とサンプル

実際にUIコンポーネントとしてどういったものが使えるのか、自分のオススメコンポーネントとともに紹介します。

まずはTabです。次の例はToolbarとTabを組み合わせたものです。
コードを見るとわかるのですが、50行以下の記述でアプリライクなツールバーとタブが実装できます。

もう一つ、推したいのがSheetです。上の例の「Open Sheet」ボタンを押すと左からViewが登場します。
いわゆるモーダルの亜種なコンポーネントですが、Matterial DesignのSheets:sideとして定義されているようなものです。

モーダルでは表現できないモードを表現できたり、propsとしてpositionに"buttom"を渡すことで表示する方向も制御できます。

他にもForm系のコンポーネントも充実しており、フォーム系ライブラリと組み合わせることで爆速でフォーム系のページを構築することもできます。

こういったコンポーネントを用いてSPAををサクッと実装できるのがSancho UIの強みです。ぜひ、次のプロジェクトに使ってみてはどうでしょうか?
利用者を増やして、作者のやる気スイッチを一緒に押しましょう!

B!
dev

Next.jsのStatic Generationを追う際に参考にしたページ

Next.jsのStatic Generationを追っておく際に見たページをまとめた。簡単に要点をまとめてはいるが、詳しくはリンク先のオリジナルを見てほしい。 > 2019 in Review2

dev

リモート勤務なITエンジニアが分報で気をつけること

2020年になり誰もが予想しなかった速度で、人々の営みはオンライン上で行われるようになりました。もちろん仕事も例外ではありません。 そういった変化の中ではオンライン上のコミュニケーションがより重要

poen

うちでやりたい○つのこと

新型コロナウイルスの影響で外出が推奨されなくなって数週間がたった。 「自分は普段から引きこもりがちだ。大して影響はないだろう。」と構えていたが、日に日に後ろ向きの感情が強くなっているように感じている

うちにいよう
Copyright © 2019 @mottox2 All Rights Reserved.