Primeros pasos

Instalación

Escribe en tu terminal:

# npm
npm i effsz

# pnpm
pnpm add effsz

# yarn
yarn add effsz

Inicio rápido

En resumen, cada componente web debe definirse antes de su uso. Cada módulo de esta biblioteca proporciona dicha función:

• useLimit (de effsz/limit) define un contenedor que limita la cantidad de elementos secundarios visibles cuando se desborda;
• useScroll (de effsz/scroll) define un contenedor que, basado en el desplazamiento nativo, establece su propia barra de desplazamiento y sombras, las cuales se muestran igual en diferentes navegadores;
• useSplit (de effsz/split) define un contenedor que divide su área en ranuras redimensionables;
• useMasonry (de effsz/masonry) define un contenedor donde un eje utiliza un diseño de cuadrícula estricta y el otro un diseño de mampostería. Muestra el contenido a través de ranuras, y cada elemento ranurado debe tener un atributo slot con su índice ordinal y un valor de relación de aspecto definido mediante la propiedad aspect-ratio dentro del atributo style o mediante el atributo data-effsz-ar. Este componente puede ser útil para mostrar una gran cantidad de imágenes con diferentes relaciones de aspecto;
• useExpand de effsz/expand define un contenedor que se puede expandir o contraer a tamaños máximos y mínimos predefinidos, respectivamente;
• useCarousel de effsz/carousel define un contenedor de carrusel;
• useSlide de effsz/slide define un contenedor que permite mostrar su contenido en forma de diálogo que aparece (se desliza) desde fuera de la pantalla.

Cada función devuelve un objeto con los manejadores de eventos observe y unobserve para controlar el comportamiento de los componentes;

Por ejemplo, si desea utilizar el contenedor dividido:

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

// Define el componente web personalizado antes de usarlo.
// Ten en cuenta que, para SSR, debes llamarlo antes de que el navegador analice el cuerpo del documento.
// Por lo tanto, es posible que debas agregar un script de definición aparte al encabezado del documento.
const { observe } = useSplit();

export const App = () => {
    const ref = useRef();
    useEffect(() => {
      // Puedes observar los eventos de los componentes web
      const unobserve = observe((e) => {
        // controlador de eventos
      }, ref.current);
      // y puedes dejar de observar
      return () => unobserve();
    }, []);
    // simplemente usa el componente web en JSX.
    // todos los atributos se describen en la interfaz 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>;
}

Eso es todo. Disfruta de la sencillez.