react plock

React Plock은 Tree Shakable Ultra Small NPM 패키지 ( 1KB 미만 )로 놀라운 개발자 경험을 통해 놀라운 벽돌 레이아웃을 만들 수 있습니다. React Plock을 사용하면 다양한 화면 크기 및 장치에 적응하는 반응 형 및 사용자 정의 가능한 레이아웃을 쉽게 만들 수 있습니다.

특징

• 벽돌 레이아웃 : 아름다운 벽돌 레이아웃을 쉽게 만듭니다.
• 균형 레이아웃 : 각 항목의 높이를 고려하여보다 시각적으로 조화로운 벽돌 그리드를 만듭니다.
• 응답 : 다른 화면 크기 및 장치에 자동으로 적응합니다.
• 사용자 정의 가능 : 필요에 맞게 레이아웃을 사용자 정의하십시오.
• TypeScript Ready : 타입 안전 언어의 강도를 얻으십시오.
• 놀라운 DX : 사용하기 쉬우 며 문서가 잘 기록되어 있습니다.

예

• Next.js 14 (서버 구성 요소) 사용 작업 데모를 참조하십시오
• vitejs를 사용하여 작업 데모를 참조하십시오

설치

npm install react-plock

용법

새로운 V3 API와 함께 Plock을 사용하여 케이크 조각입니다. 다음은 석조 그리드를 어떻게 만들 수 있는지에 대한 예입니다. 여기를 클릭 하여이 예제의 데모를 볼 수도 있습니다.

 import { Masonry } from 'react-plock' ;

const ImagesMasonry = ( ) => {
  const items = [ ... imageUrls ] ;

  return (
    < Masonry
      items = { items }
      config = { {
        columns : [ 1 , 2 , 3 ] ,
        gap : [ 24 , 12 , 6 ] ,
        media : [ 640 , 768 , 1024 ] ,
      } }
      render = { ( item , idx ) => (
        < img key = { idx } src = { item } style = { { width : '100%' , height : 'auto' } } />
      ) }
    />
  ) ;
} ;

균형 레이아웃

React Plock은 각 항목의 높이를 고려하여보다 시각적으로 조화로운 벽돌 그리드를 생성하는 균형 레이아웃 옵션을 제공합니다. useBalancedLayout: true 에서 활성화되면 레이아웃 알고리즘은 열 간의 높이 차이를 최소화하려고 시도하면서 열에 항목을 배포합니다.

이는 이미지 나 카드와 같이 높이가 다양한 콘텐츠에 특히 유용하며 전통적인 벽돌 레이아웃이 고르지 않은 열을 생성 할 수 있습니다.

항목을 순차적으로 배포하는 기본 레이아웃과 달리 균형 레이아웃은 동적으로 측정하고 항목 배치를 조정하여보다 미적으로 유쾌한 결과를 만듭니다.

 < Masonry
  items = { items }
  config = { {
    columns : [ 2 , 3 , 4 ] ,
    gap : [ 16 , 16 , 16 ] ,
    media : [ 640 , 768 , 1024 ] ,
    useBalancedLayout : true , // Enable balanced layout
  } }
  render = { ( item ) => (
    < img src = { item . url } alt = { item . alt } style = { { width : '100%' } } />
  ) }
/>

API 참조

Masonry 구성 요소의 TypeScript 정의는 다음과 같습니다. 아래에서보다 자세한 설명을 찾을 수 있습니다.

 export type MasonryProps < T > = React . ComponentPropsWithoutRef < 'div' > & {
  items : T [ ] ;
  render : ( item : T , idx : number ) => React . ReactNode ;
  config : {
    columns : number | number [ ] ;
    gap : number | number [ ] ;
    media ?: number [ ] ;
    useBalancedLayout ?: boolean ;
  } ;
  as ?: React . ElementType ;
} ; 

항목

이 소품은 일반적인 요소를 수용하며 각 요소는 렌더 특성으로 전달됩니다.

세우다

벽돌은 소품을 렌더링합니다. 여기서 그리드의 모든 타일 스타일을 정의하는 곳은 기능이 현재 루핑 항목과 상대 색인을 취합니다.

구성

열, 미디어 쿼리 및 항목 간의 간격을 정의하는 데 사용되는 구성 객체.

다른 소품

보시다시피, React.ComponentPropsWithoutRef<"div"> 사용하여 사용 가능한 모든 속성을 DIV에 전달할 수 있으면 일부 예제는 ID 및 ClassName 입니다. 덮어 쓰게 될 유일한 속성은 석조 세대에 내부적으로 사용되기 때문에 style 될 것입니다.

중요한 메모

구성 속성의 열 속성에 배열을 전달하는 경우 요소 수는 제공된 미디어 수 및 간격 중단 점수와 같아야 합니다 !

 // Correct: This will be responsive with 3 breakpoints.
< Masonry
  { ... otherProps }
  config = { {
    columns : [ 1 , 2 , 3 ] ,
    gap : [ 12 , 16 , 20 ] ,
    media : [ 640 , 768 , 1024 ] ,
  } }
/>

// Correct: This will be responsive with 2 breakpoints.
< Masonry
  { ... otherProps }
  config = { {
    columns : [ 1 , 2 ] ,
    gap : [ 2 , 4 ] ,
    media : [ 640 , 1024 ] ,
  } }
/ >

// Correct: This will be fixed with 4 columns in every screen size.
< Masonry
  { ... otherProps }
  config = { {
    columns : 4 ,
    gap : 8
  } }
/>

// NOT Correct: This will cause trouble in rendering.
< Masonry
  { ... otherProps }
  config = { {
    columns : [ 4 ] ,
    media : [ 640 , 768 ] ,
  } }
/ >