EffSZ is a web component library that controls the size and visibility of content.

Some features

• lightweight
• zero-dependency
• framework agnostic

Links

• Docs
• SourceCraft
• GitVerse
• GitHub

Examples

• React
• Svelte

Installation

Type in your terminal:

# npm
npm i effsz

# pnpm
pnpm add effsz

# yarn
yarn add effsz

Quick start

In short each web component should be defined before use. Every module in this library provides such a function

• useLimit from effsz/limit defines container that limits count of visible children when it overflows;
• useScroll from effsz/scroll defines container that based on the native scroll, but sets its own scrollbar and shadows which are displayed the same for different browsers;
• useSplit from effsz/split defines container that split its area between slots that can be resized;
• useMasonry from effsz/masonry defines container where 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;
• useExpand from effsz/expand defines container that can be expanded or collapsed to predefined max and min sizes respectively;
• useCarousel from effsz/carousel defines carousel container;
• useSlide from effsz/slide defines container that allows to display its contents in the form of a dialog that appears (slides out) from off the screen.

Each function returns object with observe and unobserve event handlers to control components behavior.

For example, you would like to use Split container:

import { useEffect } from 'react';
import { useSplit } from 'effsz/split'

// define custom web component before use
// note, that for SSR you need to call it before browser parse document body
// so you might need to add separate definition script to the document head
const { observe } = useSplit();

export const App = () => {
    const ref = useRef();
    useEffect(() => {
      // you can observe web component events
      const unobserve = observe((e) => {
        // event handler
      }, ref.current);
      // and you can unobserve
      return () => unobserve();
    }, []);
    // just use web component in jsx
    // all attributes are described in ISplitContainerAttrs interface
    return <div ref={ref}>
        <effsz-split
            ini='0.25 0.5'
            min='0.25 0.25 0.1'
            fdir='rr'
        >
            <div class='first' slot='1'>
                ...
            </div>
            <div class='second' slot='2'>
                ...
            </div>
            <div class='last'>
                ...
            </div>
        </effsz-split>
    </div>;
}

That's all. Enjoy simplicity.