react plock

React Plock est un package NPM ultra-petit arboresceable ( moins de 1 Ko gzipped ) qui vous permet de créer des dispositions de maçonnerie incroyables avec une expérience de développeur incroyable. Avec React Plock, vous pouvez facilement créer des dispositions réactives et personnalisables qui s'adaptent à différentes tailles d'écran et appareils.

Caractéristiques

• Disposition de la maçonnerie : créez facilement de belles mises en page de maçonnerie.
• Disposition équilibrée : créez une grille de maçonnerie plus harmonieuse visuellement en considérant la hauteur de chaque élément.
• Réactif : s'adapte automatiquement à différentes tailles d'écran et appareils.
• Personnalisable : personnalisez la mise en page pour répondre à vos besoins.
• TypeScript prêt : obtenez la force des langages de type type.
• DX incroyable : facile à utiliser et bien documenté.

Exemples

• Utilisation de next.js 14 (composants du serveur) Voir la démo de travail
• Utilisation de Vitejs Voir la démo de travail

Installation

npm install react-plock

Usage

En utilisant le poche avec les nouvelles API V3, c'est un morceau de gâteau. Voici un exemple de la façon de créer une grille de maçonnerie. Vous pouvez même voir une démo de cet exemple en cliquant ici.

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

Disposition équilibrée

React Plock propose une option de mise en page équilibrée qui crée une grille de maçonnerie plus harmonieuse visuellement en considérant la hauteur de chaque élément. Lorsqu'il est activé avec useBalancedLayout: true , l'algorithme de mise en page distribue des éléments à travers les colonnes tout en essayant de minimiser les différences de hauteur entre les colonnes.

Ceci est particulièrement utile pour le contenu avec des hauteurs variables, telles que des images ou des cartes, où une disposition traditionnelle de maçonnerie peut créer des colonnes inégales.

Contrairement à la disposition par défaut qui distribue séquentiellement les éléments, la disposition équilibrée mesure et ajuste dynamiquement le placement des éléments pour créer un résultat plus esthétique.

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

Référence de l'API

Voici la définition de type dactylographiée pour le composant de maçonnerie, ci-dessous, vous pouvez trouver une explication plus détaillée.

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

Articles

Cet accessoire accepte un tableau générique d'éléments, chacun sera transmis à la propriété de rendu .

Rendre

La maçonnerie Render Prop. Voici où vous définissez les styles de chaque tuile de la grille, la fonction prend l'élément de boucle actuel et l'index relatif.

Configurer

Un objet de configuration qui est utilisé pour définir le nombre de colonnes, de requêtes multimédias et de lacunes entre les éléments.

Autres accessoires

Comme vous pouvez le voir, en utilisant React.ComponentPropsWithoutRef<"div"> vous pouvez simplement passer chaque propriété disponible au div, certains exemples sont ID et ClassName . La seule propriété qui sera écrasée sera le style car il est utilisé en interne pour la génération de maçonnerie.

Note importante

Veuillez noter que si vous passez un tableau à l'attribut des colonnes de la propriété Config, le nombre d'éléments doit être égal au nombre de points d'arrêt des médias et des écarts fournis!

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