react plock

O React Plock é um pacote NPM ultra pequeno em forma de árvore ( menos de 1 KB ) que permite criar incríveis layouts de alvenaria com uma incrível experiência de desenvolvedor. Com o React Plock, você pode criar facilmente layouts responsivos e personalizáveis que se adaptam a diferentes tamanhos e dispositivos de tela.

Características

• Layout de alvenaria : crie lindos layouts de alvenaria com facilidade.
• Layout equilibrado : crie uma grade de alvenaria mais harmoniosa visualmente, considerando a altura de cada item.
• Responsivo : se adapta automaticamente a diferentes tamanhos e dispositivos de tela.
• Personalizável : personalize o layout para atender às suas necessidades.
• TypeScript Ready : Obtenha a força dos idiomas seguros de tipo.
• DX incrível : fácil de usar e bem documentado.

Exemplos

• Usando o next.js 14 (componentes do servidor) Veja a demonstração de trabalho
• Usando Vitejs Veja a demonstração de trabalho

Instalação

npm install react-plock

Uso

Usando o Plock com as novas APIs V3, é um pedaço de bolo. Aqui está um exemplo de como você pode criar uma grade de alvenaria. Você pode até ver uma demonstração deste exemplo clicando aqui.

 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' } } />
      ) }
    />
  ) ;
} ;

Layout equilibrado

O React Plock oferece uma opção de layout equilibrada que cria uma grade de alvenaria mais visualmente harmoniosa, considerando a altura de cada item. Quando ativado com useBalancedLayout: true , o algoritmo de layout distribui itens nas colunas enquanto tenta minimizar as diferenças de altura entre as colunas.

Isso é particularmente útil para conteúdo com alturas variadas, como imagens ou cartões, onde um layout de alvenaria tradicional pode criar colunas desiguais.

Ao contrário do layout padrão que distribui itens sequencialmente, o layout equilibrado mede dinamicamente e ajusta a colocação do item para criar um resultado mais esteticamente agradável.

 < 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%' } } />
  ) }
/>

Referência da API

Aqui está a definição do TypeScript para o componente de alvenaria, abaixo, você pode encontrar uma explicação mais detalhada.

 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 ;
} ; 

Unid

Este suporte aceita uma variedade genérica de elementos, cada um será passado para a propriedade Render .

Renderizar

A alvenaria renderiza Prop. Aqui é onde você define os estilos de todos os ladrilhos da grade, a função leva o item de loop atual e o índice relativo.

Config

Um objeto de configuração usado para definir o número de colunas, consultas de mídia e lacunas entre os itens.

Outros adereços

Como você pode ver, usando React.ComponentPropsWithoutRef<"div"> Você pode simplesmente passar em todas as propriedades disponíveis para a div, alguns exemplos são ID e ClassName . A única propriedade que será substituída será o style porque é usado internamente para a geração de alvenaria.

Nota importante

Observe que, caso você esteja passando uma matriz para o atributo de colunas da propriedade Config, o número de elementos deve ser igual ao número de pontos de interrupção de mídia e lacunas fornecidas!

 // 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 ] ,
  } }
/ >