🖼️

UIをブラウザーモックアップとして表示

2022/01/06に公開

UIをブラウザーモックアップとして表示するReactコンポーネント

アプリを作った後、綺麗にスクリーンショットを写せる方法に悩んでたので、ブラウザーのタブの見た目をしたフレームをReactコンポーネントとして作ってみました！

NPMで簡単にインストールすることで使えます：

npm i react-mockup

ブラウザーモックアップのコンポーネントはこのように加える事ができます：

      <BrowserMockup
        src=""
        type=""
        angleX=""
        angleY=""
        shadow=""
        border=""
        color=""
      />

プロパティー	何を入れるか
ｓｒｃ	アプリのスクリーンショット・画像等を追加
type	見た目の種類（現在は'mac'と'outline'という2つの種類しか対応していません、、）
angleX	モックアップのX角度
angleY	モックアップのY角度
shadow	モックアップの`box-shadow`を定めます（不要な場合は'none'と入力）
border	モックアップの`border`を定めます（不要な場合は'none'と入力）
color	ブラウザーモックアップの頭部色

使用例：

      <BrowserMockup
        src="myrandomimage.png"
        type="mac"
        border="none"
        color="black"
      />

実際だと、前作った「DEIZU」という時間割表を作成するサイトの紹介ページにも使用しています：
https://deizu.vercel.app/

モバイルモックアップ（<MobileMockup/>）も一応有りますがあまり満足していません、、ブラウザーモックアプと同じようにカスタマイズできますがtypeとcolorのプロパティーが無いのでご了承下さい。

これからもまだまだブラウザーモックアップの種類は拡大していく予定です（Windowsのアイコンを追加する等）！