Customize Rendering

The React Virtuoso component renders as several nested DIV elements. The default values in the component prop entries are div.

txt

Pass a custom component to the specified key in components to change rendering. Notice that the List component must accept and pass its ref to the actual DOM element. The example below adds borders to each customizable element.

Do not inline the components definitions in the prop

If you pass the components inline and combine that with useState, each re-render will pass a new instance component, causing unnecessary unmounting and remounting. Don’t do

tsx

Move the components outside. If you need to capture a certain state in them, use the context prop.

Example with @emotion/styled

tsx

TypeScript Interfaces

The types for each component are available in the Components interface. The example below annotates the Scroller custom component:

tsx