Props for the ScrollView component.
Extends standard BoxProps from Ink.
Props
readonlyoptionalalignItems:"flex-start"|"center"|"flex-end"|"stretch"
The align-items property defines the default behavior for how items are laid out along the cross axis (perpendicular to the main axis). See align-items.
BoxProps.alignItems
readonlyoptionalalignSelf:"flex-start"|"center"|"flex-end"|"auto"
It makes possible to override the align-items value for specific flex items. See align-self.
BoxProps.alignSelf
aria-hidden?
readonlyoptionalaria-hidden:boolean
Hide the element from screen readers.
BoxProps.aria-hidden
readonlyoptionalaria-label:string
A label for the element for screen readers.
BoxProps.aria-label
readonlyoptionalaria-role:"button"|"checkbox"|"combobox"|"list"|"listbox"|"listitem"|"menu"|"menuitem"|"option"|"progressbar"|"radio"|"radiogroup"|"tab"|"tablist"|"table"|"textbox"|"timer"|"toolbar"
The role of the element.
BoxProps.aria-role
readonlyoptionalaria-state:object
The state of the element.
readonlyoptionalbusy:boolean
readonlyoptionalchecked:boolean
readonlyoptionaldisabled:boolean
readonlyoptionalexpanded:boolean
readonlyoptionalmultiline:boolean
readonlyoptionalmultiselectable:boolean
readonlyoptionalreadonly:boolean
readonlyoptionalrequired:boolean
readonlyoptionalselected:boolean
BoxProps.aria-state
readonlyoptionalbackgroundColor:LiteralUnion<keyof ForegroundColor,string>
Background color for the element.
Accepts the same values as color in the <Text> component.
BoxProps.backgroundColor
readonlyoptionalborderBottom:boolean
Determines whether bottom border is visible.
true;BoxProps.borderBottom
readonlyoptionalborderBottomColor:LiteralUnion<keyof ForegroundColor,string>
Change bottom border color. Accepts the same values as color in Text component.
BoxProps.borderBottomColor
readonlyoptionalborderBottomDimColor:boolean
Dim the bottom border color.
false;BoxProps.borderBottomDimColor
readonlyoptionalborderColor:LiteralUnion<keyof ForegroundColor,string>
Change border color. A shorthand for setting borderTopColor, borderRightColor, borderBottomColor, and borderLeftColor.
BoxProps.borderColor
readonlyoptionalborderDimColor:boolean
Dim the border color. A shorthand for setting borderTopDimColor, borderBottomDimColor, borderLeftDimColor, and borderRightDimColor.
false;BoxProps.borderDimColor
readonlyoptionalborderLeft:boolean
Determines whether left border is visible.
true;BoxProps.borderLeft
readonlyoptionalborderLeftColor:LiteralUnion<keyof ForegroundColor,string>
Change left border color. Accepts the same values as color in Text component.
BoxProps.borderLeftColor
readonlyoptionalborderLeftDimColor:boolean
Dim the left border color.
false;BoxProps.borderLeftDimColor
readonlyoptionalborderRight:boolean
Determines whether right border is visible.
true;BoxProps.borderRight
readonlyoptionalborderRightColor:LiteralUnion<keyof ForegroundColor,string>
Change right border color. Accepts the same values as color in Text component.
BoxProps.borderRightColor
readonlyoptionalborderRightDimColor:boolean
Dim the right border color.
false;BoxProps.borderRightDimColor
readonlyoptionalborderStyle: keyof Boxes |BoxStyle
Add a border with a specified style. If borderStyle is undefined (the default), no border will be added.
BoxProps.borderStyle
readonlyoptionalborderTop:boolean
Determines whether top border is visible.
true;BoxProps.borderTop
readonlyoptionalborderTopColor:LiteralUnion<keyof ForegroundColor,string>
Change top border color. Accepts the same values as color in Text component.
BoxProps.borderTopColor
readonlyoptionalborderTopDimColor:boolean
Dim the top border color.
false;BoxProps.borderTopDimColor
optionalchildren:ReactNode
The content to be scrolled.
Accepts an array of React elements. Each element should have a unique key
prop, which will be preserved during rendering for proper reconciliation.
readonlyoptionalcolumnGap:number
Size of the gap between an element's columns.
BoxProps.columnGap
optionaldebug:boolean
Enable debug mode to visualize the ScrollView internals.
When enabled, the viewport overflow is not hidden, allowing the full content to be visible. This is useful for inspecting the layout and verifying that content is being rendered correctly off-screen.
readonlyoptionaldisplay:"flex"|"none"
Set this property to none to hide the element.
BoxProps.display
readonlyoptionalflexBasis:string|number
It specifies the initial size of the flex item, before any available space is distributed according to the flex factors. See flex-basis.
BoxProps.flexBasis
readonlyoptionalflexDirection:"row"|"column"|"row-reverse"|"column-reverse"
It establishes the main-axis, thus defining the direction flex items are placed in the flex container. See flex-direction.
BoxProps.flexDirection
readonlyoptionalflexGrow:number
This property defines the ability for a flex item to grow if necessary. See flex-grow.
BoxProps.flexGrow
readonlyoptionalflexShrink:number
It specifies the “flex shrink factor”, which determines how much the flex item will shrink relative to the rest of the flex items in the flex container when there isn’t enough space on the row. See flex-shrink.
BoxProps.flexShrink
readonlyoptionalflexWrap:"nowrap"|"wrap"|"wrap-reverse"
It defines whether the flex items are forced in a single line or can be flowed into multiple lines. If set to multiple lines, it also defines the cross-axis which determines the direction new lines are stacked in. See flex-wrap.
BoxProps.flexWrap
readonlyoptionalgap:number
Size of the gap between an element's columns and rows. A shorthand for columnGap and rowGap.
BoxProps.gap
readonlyoptionalheight:string|number
Height of the element in lines (rows). You can also set it as a percentage, which will calculate the height based on the height of the parent element.
BoxProps.height
readonlyoptionaljustifyContent:"flex-start"|"center"|"flex-end"|"space-between"|"space-around"|"space-evenly"
It defines the alignment along the main axis. See justify-content.
BoxProps.justifyContent
readonlyoptionalmargin:number
Margin on all sides. Equivalent to setting marginTop, marginBottom, marginLeft, and marginRight.
BoxProps.margin
readonlyoptionalmarginBottom:number
Bottom margin.
BoxProps.marginBottom
readonlyoptionalmarginLeft:number
Left margin.
BoxProps.marginLeft
readonlyoptionalmarginRight:number
Right margin.
BoxProps.marginRight
readonlyoptionalmarginTop:number
Top margin.
BoxProps.marginTop
readonlyoptionalmarginX:number
Horizontal margin. Equivalent to setting marginLeft and marginRight.
BoxProps.marginX
readonlyoptionalmarginY:number
Vertical margin. Equivalent to setting marginTop and marginBottom.
BoxProps.marginY
readonlyoptionalminHeight:string|number
Sets a minimum height of the element.
BoxProps.minHeight
readonlyoptionalminWidth:string|number
Sets a minimum width of the element.
BoxProps.minWidth
optionalonContentHeightChange: (height,previousHeight) =>void
Callback fired when the total height of the content changes.
number
The new total content height.
number
The previous total content height.
void
Useful for debug logging or adjusting external layouts based on content size.
optionalonItemHeightChange: (index,height,previousHeight) =>void
Callback fired when an individual child item's height changes.
number
The index of the item.
number
The new height of the item.
number
The previous height of the item.
void
This is triggered whenever an item is re-measured and its height differs from the previous value.
optionalonScroll: (scrollOffset) =>void
Callback fired when the scroll position changes.
number
The new scroll offset (distance from top).
void
Use this to sync external state or UI (e.g., scrollbars) with the current scroll position.
optionalonViewportSizeChange: (size,previousSize) =>void
Callback fired when the ScrollView viewport (visible area) dimensions change.
The new dimensions of the viewport (width, height).
number
number
The previous dimensions of the viewport (width, height).
number
number
void
Fired whenever the outer container size changes (e.g., terminal resize or layout update).
readonlyoptionaloverflow:"visible"|"hidden"
Behavior for an element's overflow in both directions.
"visible";BoxProps.overflow
readonlyoptionaloverflowX:"visible"|"hidden"
Behavior for an element's overflow in the horizontal direction.
"visible";BoxProps.overflowX
readonlyoptionaloverflowY:"visible"|"hidden"
Behavior for an element's overflow in the vertical direction.
"visible";BoxProps.overflowY
readonlyoptionalpadding:number
Padding on all sides. Equivalent to setting paddingTop, paddingBottom, paddingLeft, and paddingRight.
BoxProps.padding
readonlyoptionalpaddingBottom:number
Bottom padding.
BoxProps.paddingBottom
readonlyoptionalpaddingLeft:number
Left padding.
BoxProps.paddingLeft
readonlyoptionalpaddingRight:number
Right padding.
BoxProps.paddingRight
readonlyoptionalpaddingTop:number
Top padding.
BoxProps.paddingTop
readonlyoptionalpaddingX:number
Horizontal padding. Equivalent to setting paddingLeft and paddingRight.
BoxProps.paddingX
readonlyoptionalpaddingY:number
Vertical padding. Equivalent to setting paddingTop and paddingBottom.
BoxProps.paddingY
readonlyoptionalposition:"absolute"|"relative"
BoxProps.position
readonlyoptionalrowGap:number
Size of the gap between an element's rows.
BoxProps.rowGap
readonlyoptionalwidth:string|number
Width of the element in spaces. You can also set it as a percentage, which will calculate the width based on the width of the parent element.
BoxProps.width