@snack-uikit/scroll

Scroll

Installation

npm i @snack-uikit/scroll

Changelog

Description

• Пакет @snack-uikit/scroll предоставляет компонент Scroll для создания прокручиваемых контейнеров с кастомизируемыми скроллбарами на основе библиотеки OverlayScrollbars.
• Компонент поддерживает различные размеры скроллбаров (size: "s" | "m") и стратегии их скрытия (barHideStrategy): всегда показывать, скрывать при уходе курсора, показывать только при скроллинге или при движении курсора.
• Позволяет настроить автоскролл при монтировании и изменении размера контента в направлении вниз (autoscrollTo: "bottom") или вправо (autoscrollTo: "right"), что удобно для чатов, логов и динамически обновляемого контента.
• Поддерживает настройку возможности изменения размера контейнера (resize): запрет изменения, только горизонтальное, только вертикальное или в обеих координатах.
• Предоставляет возможность отключить клик по скроллбару для прокрутки (clickScrolling) и сделать скроллбары недоступными для взаимодействия мышью (untouchableScrollbars).
• Компонент возвращает ref на viewport-элемент и поддерживает колбэки для событий скролла (onScroll) и инициализации (onInitialized).
• Figma: Scroll.

Example

import { Scroll } from '@snack-uikit/scroll';
import { Card } from '@snack-uikit/card';

function Example() {
  return (
    <Scroll
      size="m"
      barHideStrategy="leave"
      autoscrollTo="bottom"
      onScroll={(event) => console.log('Scrolled', event)}
    >
      <div>
        {Array.from({ length: 10 }).map((_, index) => (
          <Card key={index} header={<Card.Header title={`Card ${index + 1}`} />} outline>
            Контент карточки с прокруткой
          </Card>
        ))}
      </div>
    </Scroll>
  );
}

setNonce

setNonce

Установить nonce атрибут для инлайн стилей.

Scroll

Props