@blocz/react-responsive v3가 종료되었습니다.

v3@blocz/react-responsive가 몇 가지 버그 수정과 새로운 이름으로 출시되었습니다. 여기에서 전체 릴리스 세부 정보를 확인할 수 있습니다. https://github.com/bloczjs/react-responsive/releases/tag/v3.0.0

특징

성능

TypeScript 지원

CSS-in-JS 호환성

맞춤형

SSR 호환 가능

약간의 역사

3년 전에는 페이지를 모바일에서 보느냐 데스크톱에서 보느냐에 따라 구성 요소 또는 다른 구성 요소를 표시하는 방법이 필요했습니다. 두 가지를 염두에 두었습니다.

뷰포트 크기에 따라 일부 구성 요소 렌더링을 피하고 (display: null 를 사용하지 않음),

미리 정의된 중단점 세트를 정의하고 매번 다시 정의할 필요가 없습니다.

중단점은 실제 중단점 대신 크기 범위여야 합니다. 누군가가 md 를 사용할 때 일반적으로 sm 에도 적용하고 싶어하지 않습니다(md down 를 지정하는 경우 제외).

그리고 당시 존재했던 라이브러리 중 어느 것도 이러한 기능을 제공할 수 없었습니다. 그래서 나는 내 것을 만들었습니다: react-only .

이 라이브러리는 반응 커뮤니티가 진화함에 따라 진화했습니다.

v0에는 CSS-in-JS

에 대한 중단점, 공급자 및 지원이 있었습니다.

v1은 TypeScript 및 반응 후크 주변에서 대대적으로 재작성되었습니다(클래스 구성 요소를 후크로 업그레이드하는 방법에 대한 팁은 다음 게시물을 확인하십시오).

클래스 구성 요소를 후크로 마이그레이션

Ayc0 ・ 2020년 5월 3일 ・ 9분 읽기

#react #hooks #migration

v2는 반응 컨텍스트에 대한 주요 재작성이었습니다(동일한 앱에 여러 공급자가 있는 경우 이전 구현이 작동하지 않음)

v3

그동안 우리는 이름react-only을 유지했지만 이 라이브러리가 무엇을 위한 것인지는 설명하지 않았습니다. 따라서 이 v3에서는 이름을 @blocz/react-responsive로 바꾸고 일반적으로 내보낸 기능에 더 나은 이름을 사용하기로 결정했습니다.

API

후크

@blocz/react-responsive는 2개의 후크를 중심으로 합니다.

useMediaQuery 현재 보기가 지정된 미디어 쿼리(문자열)와 일치하는지 감지

useBreakpoint 현재 보기가 미리 정의된 중단점과 일치하는지 감지

예시:

import { useBreakpoint, useMediaQuery } from "@blocz/react-responsive";

const Breakpoints = () => {
  const matchXl = useBreakpoint("xl");
  const matchMdDown = useBreakpoint("mdDown");
  const matchMdOrLg = useBreakpoint("md lg");
  return (
    <ul>
      {matchXl && <li>Visible on every "large" device</li>}
      {matchMdDown && <li>Visible on every device smaller or equal than "medium"</li>}
      {matchMdOrLg && <li>Visible on every "medium" or "large" device</li>}
    </ul>
  );
};

const MediaQuery = () => {
  const matchMediaQuery = useMediaQuery("(min-width:768px) and (max-width:992px)");
  return <ul>{matchMediaQuery && <li>Visible at (min-width:768px) and (max-width:992px)</li>}</ul>;
};

성능

중단점/미디어 쿼리가 현재 뷰포트와 일치하는지 여부를 확인하기 위해 크기 조정 이벤트에 이벤트 리스너를 사용하지 않고 대신 matchMedia를 사용하여 미디어 쿼리가 일치를 시작/중지할 때만 JS 코드를 실행하고 각 크기 조정이 아닙니다.

중단점

기본적으로 미리 정의된 중단점이 사용됩니다.


중단점
에서
에게


XS
0px
575픽셀

에스엠
576픽셀
767픽셀

메릴랜드
768픽셀
991px

엘지
992픽셀
1199픽셀

특대
1200픽셀
무한대


또한 이러한 모든 중단점은 Up 및 Down 변형에 존재합니다. smDown는 0px에서 767px까지입니다.

그러나 다른 중단점이 필요한 경우 <BreakpointProvider> component을 사용할 수 있습니다.

방향

중단점은 기본적으로 가로축에 설정되지만 세로축에 설정하여 뷰포트의 높이를 확인할 수도 있습니다.

단위

기본적으로 중단점은 px를 사용하지만 em 또는 유효한 CSS 단위를 사용할 수 있습니다.

CSS-in-JS

라이브러리를 만들 때 스타일에 대해 styletron을 사용하고 있었고 @blocz/react-responsive에서 정의한 중단점을 스타일에 사용된 중단점과 바인딩하려고 했습니다.

그래서 우리는 toJSON(styletron와 같은 라이브러리용) 및 toCSS(emotion와 같은 라이브러리용) 유틸리티 기능으로 CSS-in-JS에 대한 지원을 추가했습니다.

import React from "react";
import { toJSON as createToJSON, toCSS as createToCSS , BreakpointsContext } from "@blocz/react-responsive";

const styles = {
  mdDown: {
    color: "red",
    ":hover": { color: "blue" },
  },
  lgUp: {
    color: "green",
  },
};

const App = () => {
  const breakpoints = React.useContext(BreakpointsContext);

  const toJSON = createToJSON(breakpoints);
  // toJSON(styles) returns:
  // {
  //   "@media  (max-width:991px)": {
  //     "color": "red",
  //     ":hover": {
  //       "color": "blue"
  //     }
  //   },
  //   "@media  (min-width:992px)": {
  //     "color": "green"
  //   }
  // }

  const toCSS = createToCSS(breakpoints);
  // toCSS(styles) returns:
  // `@media  (max-width:991px) {
  //   color: red;
  //   :hover {
  //     color: blue;
  //   }
  // }
  // @media  (min-width:992px) {
  //   color: green;
  // }`

SSR

라이브러리 자체는 SSR용 window.matchMedia에 대한 목을 제공하지 않습니다. 그러나 mock-match-media , @blocz/react-responsive 와 같은 것을 사용하면 듣습니다.

예제가 필요한 경우 여기에서 수행된 테스트를 확인할 수 있습니다. https://github.com/bloczjs/react-responsive/blob/master/packages/tests/src/__tests__/ssr.ts

mock-match-media의 @testing-library/react 기능을 사용하여 다양한 화면 크기에서 setMedia의 렌더링 기능으로 페이지를 렌더링합니다.