Expand container

Purpose

This container can be expanded or collapsed to predefined max and min sizes respectively. If max size is not specified then it will show all children while expanded. If min size is not specified then it will have zero size. This can be useful to dynamically display or hide layout segments.

Usage

import { useState, useEffect } from 'react';
import { useExpand } from 'effsz/expand';

const { observe } = useExpand();

export const App = () => {
    const [open, setOpen] = useState(false);
    useEffect(() => {
        const unobserve = observe((event) => {
            // handle expand events
        });
        return () => unobserve();
    }, [])
    return <div>
        <button
            onClick={() => setOpen((val) => !val)}
        >...</button>
        <effsz-expand open={open} min="20px">
            <div>...</div>
        </effsz-expand>
    </div>
};

Types

/**
 * Expand container attributes
 */
export interface IExpandContainerAttrs {
    /**
     * Main axis
     */
    axis: 'x' | 'y';
    /**
     * Min size
     */
    min: string;
    /**
     * Max size
     */
    max: string;
    /**
     * Is container expanded
     */
    open: boolean;

    // transition

    /**
     * Transition-timing-function
     */
    tf: string;
    /**
     * Resize transition duration
     */
    dur: string;
    /**
     * Resize transition delay
     */
    del: string;
};

/**
 * Expand container
 */
export interface IExpandContainerElement extends HTMLElement {
    get axis(): 'x' | 'y';
    set axis(val: 'x' | 'y');
    get isOpen(): boolean;
    get size(): number;
    /**
     * Expand to max size
     */
    expand(): void;
    /**
     * Collapse to min size
     */
    collapse(): void;
    /**
     * toggle
     */
    toggle(): void;
}