手書き風コンポーネント集wired-elements【今日のGitHubトレンド】

はじめに

GitHubのトレンドリポジトリを紹介するシリーズです。
今回は手書きワイヤーレベルのコンポーネントが使えるnpm、wired-elementsをご紹介します。

サービス開発において「デザインはまだ決まっていないけど先行して機能は作ってしまいたい」というケースはあると思います。
そんなときにmaterial UIやbootstrapを使用するのも良いですが、デザインを中途半端に当ててしまうより、ワイヤーだとわかるようなUIを当てられるのがwired-elementsです。

こんな手書き風なワイヤーを実装することができます！
これらは静的な画像ではなく、しっかりとオンオフにしたり動的な動きができることがポイントです！

wired-elementsとは

公式サイトが手書きでとてもかわいらしいのですが、説明がある通り手書き風のワイヤーコンポーネント集です。

フォームのパーツはもちろんこと、このようなパーツが用意されています。

カード

プルダウン

ハートボタン

プログレスバー

トグルボタン

インストールしてみる

では、実際に使っていきます。
今回Reactのプロジェクトで使用していきます。

まずはCreate React AppでReactアプリケーションを作っていきます。
詳細はこちらの記事でもご紹介しています。

npx create-react-app wired-react

そしてディレクトリを移動し、必要なライブラリをインストールします。
cd wired-react
yarn install

そしてwired-elements をインストールします。
yarn add wired-elements

これで準備はOKです！

実際に使っていく

app.js を更新していきます。
まずimport 'wired-elements'; でライブラリをインポートしていきます。

そしてこのようにJSX内にwired関連の記述をしましょう。

<wired-input placeholder="bagelee"></wired-input>
<wired-checkbox text="bagelee を見たことがある"></wired-checkbox>
<wired-checkbox text="bagelee をもっと読みたい"></wired-checkbox>
<wired-button >送信</wired-button>

そしてyarn startするとこのような表示となります。

他のパーツを使いたい場合はこちらのリファレンスを読んでみてください。
ですが、もともとのソースコードもとてもシンプルなので、ソースコードをそのまま読むのでも良いかもしれません。

オーバーライドする為には

部分的に手書きのUIを変えたいなど、オーバーライド（上書き）したいケースもあると思います。
そういった場合には、package.jsonの記述をこのようにしてyarnコマンドで再インストールしましょう。

  "dependencies": {
    "react": "^16.4.1",
    "react-dom": "^16.4.1",
    "react-scripts": "1.1.4", 
    "wired-elements" : "eishis/wired-elements#master", // forkしてきたGitHubのmasterブランチを指定
    "wired-elements" : "../wired-elements" // ローカルに保存されているwired-elementsを指定
  }

まとめ

今回は手書きのコンポーネントを使うことができる、wired-elementsをご紹介しました。
色々とカスタマイズのPropsも公式サイトで紹介されているので、ぜひそちらもご覧ください。
また「もうちょっとこんな機能があったら良いのに」という場合には、ぜひforkしてオーバーライド、もしくはそこからプルリクエストを送り公式にリクエストしてみるのも良いかもしれません。