Masonry container

Purpose

In this container one axis uses a typical strict grid layout and the other a masonry layout. It displays the content through slots, and each slotted element must have a slot attribute with its ordinal index and an aspect ratio value defined either using the aspect-ratio property inside the style attribute, or using the data-effsz-ar attribute. . This can be useful to display a lot of images with different aspect ratio.

Usage

import { useEffect } from 'react';
import { useMasonry } from 'effsz/masonry';

const { observe } = useMasonry();

export const App = () => {
    useEffect(() => {
        const unobserve = observe((event) => {
            // handle masonry events
        });
        return () => unobserve();
    }, [])
    return <effsz-masonry axis='y' tracks='3' trackgap='0.4rem'>
        <div slot="0" data-effsz-ar="16/9">...</div>
        <div slot="1" data-effsz-ar="9/16">...</div>
        <div slot="2" data-effsz-ar="3/4">...</div>
        <div slot="3" data-effsz-ar="1">...</div>
        <div slot="4" data-effsz-ar="0.5">...</div>
    </effsz-masonry>
};

Types

/**
 * Masonry container attributes
 */
export interface IMasonryContainerAttrs {
    /**
     * Main axis
     */
    axis: 'x' | 'y';
    /**
     * Number of tracks
     */
    tracks: string;
    /**
     * Slots divider aspect ratio
     * @description
     * Default value is `0.1` for x-axis container and `10` for y-axis
     */
    divratio: string;
    /**
     * Gap between tracks
     */
    trackgap: string;
};

/**
 * Masonry container
 */
export interface IMasonryContainerElement extends HTMLElement {
    get axis(): 'x' | 'y';
    set axis(val: 'x' | 'y');
};