Начало работы

Установка

Введите в своем терминале:

# npm
npm i effsz

# pnpm
pnpm add effsz

# yarn
yarn add effsz

Быстрый старт

Вкратце, каждый контейнер - это веб-компонент, который должен быть определен перед использованием. Каждый модуль в этой библиотеке предоставляет такую функцию

• useLimit из effsz/limit определяет контейнер, который ограничивает количество видимых дочерних элементов при его переполнении;
• useScroll из effsz/scroll определяет скролл-контейнер, устанавливающий свою собственную полосу прокрутки и тени, которые отображаются одинаково для разных браузеров;
• useSplit из effsz/split определяет контейнер, разделяющий свою площадь между слотами, размер которых может быть изменен;
• useMasonry из effsz/masonry определяет контейнер, в котором на одной оси используется типичная строгая сетка, а на другой - схема размещения типа masonry. Он отображает содержимое через слоты, и каждый слотовый элемент должен иметь атрибут slot с его порядковым индексом и значение соотношения сторон, определяемое либо с помощью свойства aspect-ratio внутри атрибута style, либо с помощью атрибута data-effsz-ar. Компонент может быть полезен для отображения большого количества изображений с различными соотношениями сторон;
• useExpand из effsz/expand определяет контейнер, который может быть расширен или свернут до заданных размеров;
• useCarousel из effsz/carousel определяет контейнер-карусель;
• useSlide из effsz/slide определяет контейнер, который позволяет отображать его содержимое в виде диалогового окна, которое появляется (выскальзывает) из-за пределов экрана.

Каждая функция возвращает объект с обработчиками observe и unbserve для контроля за изменениями компонента.

Например, вы решили использовать Split container:

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

// определите пользовательский веб-компонент перед использованием
// обратите внимание, что для SSR функцию необходимо вызывать до того, как браузер проанализирует тело документа,
// поэтому вам может потребоваться добавить отдельный скрипт в заголовок документа
const { observe } = useSplit();

export const App = () => {
    const ref = useRef();
    useEffect(() => {
      // вы можете подписаться на события компонента
      const unobserve = observe((e) => {
        // здесь идет обработка события
      }, ref.current);
      // и вы можете отписаться
      return () => unobserve();
    }, []);
    // просто используйте веб-компонент в jsx
    // все атрибуты описаны в интерфейсе ISplitContainerAttrs
    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>;
}

Вот и все. Наслаждайтесь простотой.