# ScrollArea

A scrolling region with consistent styling.

## How to use it

Set a height and make the area's purpose clear. Content remains keyboard accessible. virtualized enables large lists: items, renderItem and estimateSize on web; FlatList data and renderItem on native.



## Import


```tsx
import { ScrollArea, ScrollBar } from "@kivora/nextjs";
```


Examples run in a Client Component. Also import the hooks, icons and dependencies used. This is the web API; consult the native guide for React Native.

## Example


```tsx
<ScrollArea style={{height:180,width:320}}>{Array.from({length:15}, (_,i) => <p key={i} style={{padding:12,borderBottom:"1px solid var(--color-border)"}}>Project {i + 1}</p>)}</ScrollArea>
```


## Virtualized list

```tsx
<ScrollArea virtualized style={{height:220,width:320}} items={Array.from({length:1000}, (_,i) => `Proyecto ${i + 1}`)} estimateSize={() => 44} renderItem={item => <div style={{padding:12}}>{item}</div>} />
```


## API: ScrollArea


```typescript
ScrollArea: <TItem = unknown>(props: ScrollAreaProps<TItem> & React.RefAttributes<HTMLDivElement>) => React.ReactElement
```


| Property | Type | Required | Description |
| --- | --- | --- | --- |
| estimateSize | (index: number) => number | Yes | Estimate each row's size for virtualization. |
| items | TItem[] | Yes | Collection of items to render. |
| renderItem | (item: TItem, index: number) => ReactNode | Yes | Function building each item's view. |
| virtualized | false \| true | Yes | See the published type. |
| aria-label | string | No | Accessible name of the control. |
| asChild | boolean | No | Apply props and behavior to a single compatible child element. |
| children | ReactNode | No | Content or child elements of the component. |
| className | string | No | Additional CSS classes to customize the element. |
| defaultChecked | boolean | No | Initial selection of the control. |
| defaultValue | string \| number \| readonly string[] | No | Initial value when the component manages its own state. |
| dir | "ltr" \| "rtl" | No | Interface reading direction. |
| getItemKey | ((index: number) => Key) | No | Return a stable key for each item. |
| horizontal | boolean | No | See the published type. |
| id | string | No | Element identifier; associates labels and descriptions. |
| initialRect | Rect | No | See the published type. |
| itemClassName | string \| ((item: TItem, index: number) => string) | No | See the published type. |
| measureItems | boolean | No | See the published type. |
| onChange | ChangeEventHandler<HTMLDivElement, Element> | No | Change event. Check the type: some controls return an object, others a DOM event. |
| onClick | MouseEventHandler<HTMLDivElement> | No | Action performed when the element is activated. |
| onSubmit | SubmitEventHandler<HTMLDivElement> | No | Form submission event. |
| overscan | number | No | Extra items mounted outside the visible area. |
| role | AriaRole | No | Semantic role of the element. Keep the default role unless a change is justified. |
| scrollHideDelay | number | No | See the published type. |
| style | CSSProperties | No | React inline styles. |
| tabIndex | number | No | Keyboard focus order and availability. |
| title | string | No | Title or supplementary information. |
| type | "auto" \| "hover" \| "always" \| "scroll" | No | Operation type or mode; values depend on the component. |
| viewportClassName | string | No | See the published type. |

## API: ScrollBar


```typescript
ScrollBar: React.ForwardRefExoticComponent<ScrollBarProps & React.RefAttributes<HTMLDivElement>>
```


| Property | Type | Required | Description |
| --- | --- | --- | --- |
| aria-label | string | No | Accessible name of the control. |
| asChild | boolean | No | Apply props and behavior to a single compatible child element. |
| children | ReactNode | No | Content or child elements of the component. |
| className | string | No | Additional CSS classes to customize the element. |
| defaultChecked | boolean | No | Initial selection of the control. |
| defaultValue | string \| number \| readonly string[] | No | Initial value when the component manages its own state. |
| forceMount | true | No | See the published type. |
| id | string | No | Element identifier; associates labels and descriptions. |
| onChange | ChangeEventHandler<HTMLDivElement, Element> | No | Change event. Check the type: some controls return an object, others a DOM event. |
| onClick | MouseEventHandler<HTMLDivElement> | No | Action performed when the element is activated. |
| onSubmit | SubmitEventHandler<HTMLDivElement> | No | Form submission event. |
| orientation | "horizontal" \| "vertical" | No | Horizontal or vertical axis. |
| role | AriaRole | No | Semantic role of the element. Keep the default role unless a change is justified. |
| style | CSSProperties | No | React inline styles. |
| tabIndex | number | No | Keyboard focus order and availability. |
| title | string | No | Title or supplementary information. |

Source: https://kivora.pro/docs/componentes/scroll-area