🖼️

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

2022/01/06に公開約1,100字

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

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

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

npm i react-mockup

GitHubのリンク

https://github.com/501A-Designs/react-mockup

NPMのリンク

https://www.npmjs.com/package/react-mockup

使い方

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

      <BrowserMockup
        src=""
        type=""
        angleX=""
        angleY=""
        shadow=""
        border=""
        color=""
      />
プロパティー 何を入れるか
src アプリのスクリーンショット・画像等を追加
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/>)も一応有りますがあまり満足していません、、ブラウザーモックアプと同じようにカスタマイズできますがtypecolorのプロパティーが無いのでご了承下さい。

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

Discussion

ログインするとコメントできます