svelte-bricks

 Svelte Bricks

Naive 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 items, i.e. if items is an array of objects, this component by default tries to access a key named 'id' on each item. This value is used to tell items apart in the keyed {#each} block that renders the masonry layout. Without it, Svelte could not avoid duplicates when new items are added or existing ones rearranged. Read the Svelte docs for details. To change the name of the identifier key, use the idKey prop. You can also pass in a custom function as getId that should map items to unique IDs.

Hint: Balanced columns can be achieved even with this simple implementation if masonry items are allowed to stretch to the column height.

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:

• items: (string | number | object)[]: required
• 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).
• idKey: string = 'id': Name of the attribute to use as identifier if items are objects.
• getId: (item) => string | number: Custom function that maps masonry items to unique IDs.
• animate: boolean = true: Whether to FLIP-animate masonry items when viewport resizing or other events cause items to rearrange.
• style: string = '': Inline styles that will be applied to the top-level div.masonry.
• duration: number = 200: Transition duration in milli seconds when masonry items are rearranged or added/removed. Set to 0 to disable transitions.
• class: string = '': Applies to the outer div wrapping all masonry columns. For use with CSS frameworks like Tailwind.
• columnClass: string = '': Applies to each column div.

Styling

Besides inline CSS which you can apply through the style prop, the following :global() CSS selectors can be used for fine-grained control of wrapper and column styles:

:global(div.masonry) {
  /* top-level wrapper div */
}
:global(div.masonry div.col) {
  /* each column in the masonry layout */
}

Changelog

v0.1.7

10 May 2022

• Add props idKey: string and getId = (item) => string | number #11
• Add props idKey: string and getId = (item) => string | number (#11) #10