Photonix UI - React Components, Templates & Figma Design System

CustomScrollbar

A wrapper to apply custom branded scrollbar styles to a container.

Scroll me!

Usage

import { CustomScrollbar } from '@photonix/ultimate';

<CustomScrollbar maxHeight={200}>
  {/* Content exceeding height */}
</CustomScrollbar>

Prop	Type	Default	Description
children	`React.ReactNode`	`-`
size	`"sm" \| "md"`	`'sm'`	Scrollbar thumb size: sm = 4px, md = 8px
maxHeight	`string \| number`	`-`	Maximum height of the container (enables vertical scroll)
maxWidth	`string \| number`	`-`	Maximum width of the container (enables horizontal scroll)
fill	`boolean`	`false`	Fill available space in flex parent container. Use this instead of maxHeight="100%" when inside a flex layout. When true, the component will use flex: 1 to fill remaining space.
className	`string`	`-`	Additional className for the container
contentClassName	`string`	`-`	Additional className for the content area
verticalTrackClassName	`string`	`-`	Additional className for the vertical track
verticalTrackStyle	`React.CSSProperties`	`-`	Inline style for the vertical track
horizontalTrackClassName	`string`	`-`	Additional className for the horizontal track
horizontalTrackStyle	`React.CSSProperties`	`-`	Inline style for the horizontal track
autoHide	`boolean`	`true`	Whether to show scrollbar only on hover
onScroll	`((event: React.UIEvent<HTMLDivElement>) => void)`	`-`	Callback fired on scroll