Nextの使えるコンポーネント

画面サイズを取得する

GetWindowSize.ts

import { useEffect, useState } from "react";

export const getWindowSize = () => {
 const [windowSize, setWindowSize] = useState({
  width: 0,
  height: 0,
 });

 useEffect(() => {
  if (typeof window !== "undefined") {
   const handleResize = () => {
    setWindowSize({
     width:
      window.innerWidth,
     height: window.innerHeight,
    });
   };

   window.addEventListener("resize", handleResize);
   handleResize();
   return () => window.removeEventListener("resize", handleResize);
  } else {
   return;
  }
 }, []);
 return windowSize;
};

Next.js はPre-redndering(SSR,SSG)がサポートされているので、
Hooksでブラウザ側にしか存在しないグローバルオブジェクトのwindowやdocumentを参照する場合には必ず

if (typeof window !== "undefined") {

を実装するようにしましょう。

使い方サンプル
index.tsx

import type { NextPage } from "next";
import { getWindowSize } from "../hooks/GetWindowSize";

const Home: NextPage = () => {
  const { height, width } = getWindowSize();
  return (
    <div>
      height:{height} width:{width}
    </div>
  );
};

export default Home;

親コンポーネントから子コンポーネント内を実行する

forwardRef , useImperativeHandle を使う

● 子コンポーネントで関数 showAlert() を登録

1. メソッドの追加

import React, { useImperativeHandle, forwardRef, useRef } from "react";

// 親コンポーネントの ref.current から実行できる関数を定義したオブジェクトを返す
useImperativeHandle(ref, () => ({
  childClick() {
    voucherOpenRef.current.click();
  },
}));

2. refを受け取れるようにする

let voucher = (pops, ref) => {
  ...
};

voucher = forwardRef(voucher);

● 親コンポーネントで ref を渡す

import { useRef } from "react";

const voucherRef = useRef(null); 

<子コンポーネント
  ref={voucherRef}
/>

これで親コンポーネントから好きなタイミングで実行できるようになります。

<Button
  onClick={() => {
    voucherRef.current.childClick();
  }}
>実行ボタン</Button>