EffSZ

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:

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

and

unobserve

event handlers to control components behavior.

For example, you would like to use Split container:

That's all. Enjoy simplicity.