Getting started

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. The component can be useful for displaying a large number of images with different aspect ratios;
• 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'
            lmin='0.1'
            fdir='rr'
        >
            <div class='first'>
                ...
            </div>
            <div class='second'>
                ...
            </div>
            <div class='last'>
                ...
            </div>
        </effsz-split>
    </div>;
}

That's all. Enjoy simplicity.