react plock

React Plock ist ein baumalisches, ultra-kleines NPM-Paket ( weniger als 1 KB GZIPPED ), mit dem Sie erstaunliche Mauerwerkslayouts mit einem erstaunlichen Entwicklererlebnis erstellen können. Mit React Plock können Sie problemlos reaktionsschnelle und anpassbare Layouts erstellen, die sich an verschiedene Bildschirmgrößen und -geräte anpassen.

Merkmale

• Mauerwerkslayout : Erstellen Sie mühelos schöne Mauerwerkslayouts.
• Ausgewogenes Layout : Erstellen Sie ein visuell harmonischeres Mauerwerksnetz, indem Sie die Höhe jedes Elements berücksichtigen.
• Responsiv : Anpassen automatisch an verschiedene Bildschirmgrößen und -geräte.
• Anpassbar : Passen Sie das Layout an Ihre Anforderungen an.
• TypeScript Ready : Holen Sie sich die Stärke der Typ-sicheren Sprachen.
• Erstaunlicher DX : Einfach zu bedienen und gut dokumentiert.

Beispiele

• Verwenden Sie Next.js 14 (Server -Komponenten) Siehe Working Demo
• Verwenden von vitejs siehe funktionierende Demo

Installation

npm install react-plock

Verwendung

Mit Plock mit den neuen V3 -APIs ist es ein Kinderspiel. Hier ist ein Beispiel dafür, wie Sie ein Mauerwerksraster erstellen können. Sie können sogar eine Demo dieses Beispiels sehen, indem Sie hier klicken.

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

Ausgeglichenes Layout

React Plock bietet eine ausgewogene Layout -Option, die ein visuell harmonischeres Mauerwerksnetz erzeugt, indem die Höhe jedes Elements berücksichtigt wird. Wenn der Layoutalgorithmus mit useBalancedLayout: true aktiviert ist, verteilt er die Elemente über Spalten hinweg, während sie versuchen, Höhenunterschiede zwischen den Spalten zu minimieren.

Dies ist besonders nützlich für Inhalte mit unterschiedlichen Höhen wie Bildern oder Karten, bei denen ein herkömmliches Mauerwerkslayout ungleiche Spalten erzeugt.

Im Gegensatz zu dem Standardlayout, das Elemente nacheinander verteilt, misst das ausgewogene Layout die Element -Platzierung dynamisch und passt ein ästhetisch ansprechenderes Ergebnis an.

 < 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 -Referenz

Hier ist die Typscript -Definition für die Mauerwerkskomponente. Im Folgenden finden Sie eine detailliertere Erklärung.

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

Artikel

Diese Prop akzeptiert eine generische Reihe von Elementen, die jeder an das Render -Eigentum übergeben wird.

Machen

Das Mauerwerk rendert Requisite. Hier definieren Sie die Stile jeder Fliese des Netzes, die Funktion nimmt das aktuelle Looping -Element und den relativen Index an.

Konfiguration

Ein Konfigurationsobjekt, mit dem die Anzahl der Spalten, Medienabfragen und Lücken zwischen Elementen definiert wird.

Andere Requisiten

Wie Sie sehen können, können Sie durch die Verwendung React.ComponentPropsWithoutRef<"div"> einfach jede verfügbare Eigenschaft an die DIV übergeben, einige Beispiele sind ID und Klassenname . Die einzige Immobilie, die überschrieben wird, wird der style sein, der intern für die Mauerwerksgeneration verwendet wird.

Wichtiger Hinweis

Bitte beachten Sie, dass Sie für den Fall, dass Sie ein Array an das Attribut der Spalten der Konfigurationseigenschaft übergeben, die Anzahl der Elemente gleich der Anzahl der bereitgestellten Medien- und Gap -Haltepunkte sein muss !

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