Svelte Bricks

This is a naive masonry implementation in Svelte without column balancing.

Live demo

Installation

yarn add -D svelte-bricks

Usage

The kitchen sink for this component looks something like this:

<script>
  import Masonry from 'svelte-bricks'

  let nItems = 30
  $: items = [...Array(nItems).keys()]

  let [minColWidth, maxColWidth, gap] = [200, 800, 20]
  let width, height
</script>

Masonry size: <span>{width}px</span> &times; <span>{height}px</span> (w &times; h)

<Masonry {items} {minColWidth} {maxColWidth} {gap} let:item bind:width bind:height>
  <Some {item} />
</Masonry>

Note: On non-primitive types, i.e. if items is an array of objects, this component requires that each object have a key named 'id' that contains a unique primitive value. This value is used to identify each item in the keyed {#each} block that renders the masonry layout. Without this, Svelte could not avoid duplicates when new items are added nor maintain order when existing ones are rearranged. Read the Svelte docs for details.

Props

Masonry.svelte expects an array of items as well as a <slot /> component used to render each of the items. The array can contain whatever data (objects, strings, numbers) as long as the slot component knows how to handle it.

Additional optional props are:

• minColWidth: number = 330 (in px)
• maxColWidth: number = 500 (in px)
• gap: number = 20 (in px)
• masonryWidth: number = 0: Bound to the masonry divs width (in px).
• masonryHeight: number = 0: Bound to the masonry divs height (in px).
• animate: boolean = true: Whether to FLIP-animate masonry items when viewport resizing or other events cause items to rearrange.