react plock

React Plock es un paquete Ultra Small NPM que no puede desgarrar los árboles ( menos de 1 kb Gzipped ) que le permite crear diseños de mampostería increíbles con una experiencia de desarrollador increíble. Con React Plock, puede crear fácilmente diseños receptivos y personalizables que se adapten a diferentes tamaños y dispositivos de pantalla.

Características

• Diseño de mampostería : cree hermosos diseños de mampostería con facilidad.
• Diseño equilibrado : cree una cuadrícula de mampostería más visualmente armoniosa considerando la altura de cada elemento.
• Responsivo : se adapta automáticamente a diferentes tamaños y dispositivos de pantalla.
• Personalizable : personalice el diseño para que coincida con sus necesidades.
• TypeScript Ready : obtenga la fuerza de los idiomas de tipo seguro.
• Increíble DX : fácil de usar y bien documentado.

Ejemplos

• Uso de Next.js 14 (componentes del servidor) Consulte la demostración de trabajo
• Usando VITEJS ver la demostración de trabajo

Instalación

npm install react-plock

Uso

Usando Plock con las nuevas API V3 es un pedazo de pastel. Aquí hay un ejemplo de cómo puede crear una cuadrícula de mampostería. Incluso puede ver una demostración de este ejemplo haciendo clic aquí.

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

Diseño equilibrado

React Plock ofrece una opción de diseño equilibrada que crea una cuadrícula de mampostería más visualmente armoniosa al considerar la altura de cada elemento. Cuando está habilitado con useBalancedLayout: true , el algoritmo de diseño distribuye elementos a través de columnas mientras intenta minimizar las diferencias de altura entre las columnas.

Esto es particularmente útil para el contenido con alturas diferentes, como imágenes o tarjetas, donde un diseño de mampostería tradicional podría crear columnas desiguales.

A diferencia del diseño predeterminado que distribuye elementos secuencialmente, el diseño equilibrado mide y ajusta dinámicamente la colocación del elemento para crear un resultado más estéticamente agradable.

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

Referencia de API

Aquí está la definición TypeScript para el componente de mampostería, a continuación puede encontrar una explicación más detallada.

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

Elementos

Este accesorio acepta una variedad genérica de elementos, cada uno se pasará a la propiedad de renderizado .

Prestar

La mampostería representa la prop. Aquí es donde define los estilos de cada mosaico de la cuadrícula, la función toma el elemento de bucle actual y el índice relativo.

Configuración

Un objeto de configuración que se utiliza para definir el número de columnas, consultas de medios y brechas entre los elementos.

Otros accesorios

Como puede ver, mediante React.ComponentPropsWithoutRef<"div"> Simplemente puede aprobar todas las propiedades disponibles al DIV, algunos ejemplos son ID y ClassName . La única propiedad que se sobrescribirá será el style porque se usa internamente para la generación de mampostería.

Nota importante

Tenga en cuenta que en caso de que esté pasando una matriz al atributo de columnas de la propiedad de configuración, ¡el número de elementos debe ser igual al número de medios y puntos de interrupción de brecha proporcionados!

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