반응형 디자인을 위한 react-responsive

• custom pagination 구현 중에 반응형으로 페이지 사이즈를 결정하는 일이 있어서 해당 라이브러리를 사용하게 되었다.

설치

yarn add -D react-responsive

사용

• usePage.jsx

import React, { useRef, useState } from 'react';
import { useMediaQuery } from 'react-responsive';

export default function usePage() {
  const [currentPage, setCurrentPage] = useState(1);
  let pageSize = 20;

  const is4xl = useMediaQuery({ maxWidth: 1699 });
  const is3xl = useMediaQuery({ maxWidth: 1599 });
  const is2xl = useMediaQuery({ maxWidth: 1299 });
  const ismd = useMediaQuery({ maxWidth: 767 });
  const issm = useMediaQuery({ maxWidth: 575 });

  if (issm) { // size <= 575
    pageSize = 5;
  } else if (ismd) { // 575 < size <= 767
    pageSize = 6;
  } else if (is2xl) { // 1299 < size <= 1599
    pageSize = 9;
  } else if (is3xl) { // 1599 < size <= 1699
    pageSize = 12;
  } else if (is4xl) { // 1699 <= size
    pageSize = 15;
  }

  return {
    pageSize,
    setCurrentPage,
    currentPage,
  };
}