@urban-ui/scrollable
TypeScript icon, indicating that this package has built-in type declarations

0.1.0 • Public • Published

@urban-ui/scrollable

layout | scrollable

npm minzip size License

Creates a scrollable area

## Getting started

pnpm add -S @urban-ui/scrollable
import {Container} from '@urban-ui/container
import {Scrollable} from '@urban-ui/scrollable'

export function MyComponent() {
  return (
    <Container css={{backgroundColor: '$bg1', width: '200px', height: '250px'}}>
      <Scrollable.Root>
        <Scrollable.Viewport>
          {// content for the scrollable area}
        </Scrollable.Viewport>
        <Scrollable.Scrollbar>
          <Scrollable.Thumb />
        </Scrollable.Scrollbar>
      </Scrollable.Root>
    </Container>
  )
}

Details

Styled version of radix-ui/scrollarea.

Props that apply to the radix-ui scrollarea component also apply here. Additional props are listed here.

Scrollable is a layout component that gives some control over when and how scrollbars appear. It also attaches keyboard listeners for better control.

Package Sidebar

Install

npm i @urban-ui/scrollable

Weekly Downloads

1

Version

0.1.0

License

MIT

Unpacked Size

45.4 kB

Total Files

8

Last publish

Collaborators

  • mattstyles