Skip to main content

Using A Repeater

Hosanna UI provides a Repeater component that allows you to efficiently render repeated elements in your application. This is particularly useful for creating lists, grids, or any other layout that involves repeating similar components.

What is Repeater?

The Repeater component is designed to optimize rendering performance for repeated elements by recycling views and minimizing memory usage.

✍️ Basic Usage​

The Repeater component can be used to render a list of items dynamically:

Tip: Dynamic Data

Use the data prop to dynamically update the list of items rendered by the Repeater.

⚙️ Key Props & Methods​

Key Props
  • data: An array of items to be rendered.
  • renderItem: A function that returns the component to render for each item.
  • onItemClick: Callback triggered when an item is clicked.
  • itemHeight, itemWidth: Set the dimensions of each item.

🧪 Advanced Features​

Advanced Usage
  • Lazy Loading: Load items lazily to improve performance for large datasets.
  • Custom Layouts: Use GridGroup or HGroup for custom layouts within the Repeater.
  • Focus Management: Ensure smooth navigation between items using Hosanna UI's focus management.

Example: Grid Layout​

Repeater({
  data: Array(20).fill(0).map((_, i) => ({ id: i, color: i % 2 === 0 ? '#4A90E2' : '#50E3C2' })),
  renderItem: (item) => Rectangle({ width: 100, height: 100, color: item.color })
}).layout(GridGroup({ columns: 4 }))

Learn More​