Radix UIによるScrollArea

概要

Radix UIのはScrollAreaコンポーネントが色々あるが、それらをラップすることで、使いやすい形にする。

詳細

• ScrollArea

import { type CSSProperties, type ReactNode, type UIEventHandler } from 'react';
import * as RadixScrollArea from '@radix-ui/react-scroll-area';

import { clsx } from '@/utils/className';

import styles from './ScrollArea.module.css';

type Props = {
  className?: string;
  style?: CSSProperties;
  onScroll?: UIEventHandler<HTMLDivElement>;
  children: ReactNode;
};

export function ScrollArea({ className, style, onScroll, children }: Props) {
  return (
    <RadixScrollArea.Root className={clsx(styles.root, className)} style={style}>
      <RadixScrollArea.Viewport onScroll={onScroll} className={styles.viewport}>
        {children}
      </RadixScrollArea.Viewport>
      <RadixScrollArea.Scrollbar className={styles.scrollbar} orientation="vertical" forceMount>
        <RadixScrollArea.Thumb className={styles.thumb} />
      </RadixScrollArea.Scrollbar>
      <RadixScrollArea.Scrollbar className={styles.scrollbar} orientation="horizontal" forceMount>
        <RadixScrollArea.Thumb className={styles.thumb} />
      </RadixScrollArea.Scrollbar>
      <RadixScrollArea.Corner className={styles.corner} />
    </RadixScrollArea.Root>
  );
}

• ScrollArea.module.css

/* layer定義により共通スタイルの優先度を下げて、layer未定義の利用側のスタイルに負けるようにする */
@layer scrollAreaComponent {
  .root {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .viewport {
    width: 100%;
    height: 100%;
  }

  .scrollbar {
    display: flex;
    padding: 4px;
    background: #fafafa;

    &[data-orientation='vertical'] {
      width: var(--scrollbar-size);
      border-bottom: 1px solid #e0e5ea;
      border-left: 1px solid #e0e5ea;
    }

    &[data-orientation='horizontal'] {
      flex-direction: column;
      height: var(--scrollbar-size);
      border-top: 1px solid #e0e5ea;
      border-right: 1px solid #e0e5ea;
    }
  }

  .thumb {
    flex-grow: 1;
    background: #b0bcc7;
    border-radius: 8px;
  }

  .corner {
    background-color: transparent;
  }
}

参考資料

• radix scroll areaオフィシャルdocs