Stamp コードのご紹介：画面の高さを取得するカスタムフック

個人で開発したアプリ Stamp のコードを紹介しようというシリーズ

Stamp の URL はこちら。

Stamp

Stamp の紹介記事はこちら

Stamp は、キャンバスが画面に収まるようになっています

■フル画面で横長のキャンバスにした状態

■画面を小さくしておおよそ正方形のキャンバスにした状態

カスタムフックで実装しました

画面幅が変わったときのイベントは、普通に resize イベントを拾っています。

import React, { useState, useEffect } from 'react'

export const useInnerHeight = () => {
   const [height, setHeight] = useState(window.innerHeight)

   useEffect(() => {
       const onResize = () => {
           return setHeight(window.innerHeight)
       }
       window.addEventListener('resize', onResize, {passive: true})
       return () => window.removeEventListener('resize', onResize, {passive: true})
   }, [height])
   
   return height
}

使う側

const innerHeight = useInnerHeight()

キャンバスの大きさを色々変えてみて、お好きなサイズでスタンプしてみてください！

いい感じの絵ができたら、キャンバス下の SHARE ボタンから Twitter でシェアお願いします！