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

Some features

• lightweight
• zero-dependency
• framework agnostic

Links

• Docs
• Repository
• Github mirror

Examples

• React

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.

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.