Duct UI

List Component Demo

Interactive emoji list with filtering, pagination, and component logic access

Page 1 of 4

Emoji Collection

Activity Log

Emoji List Events

No events yet...

List Component Features Demonstrated:

  • Function-based items - `getItems(page)` enables dynamic data loading
  • Pagination - Built-in page management with `refresh(page)` method
  • Filtering - Category filtering applied in the `getItems` function
  • Item Props - Common props spread to all item components
  • Component Logic Access - Access list methods via component ref
  • State Management - Individual item state (favorites) accessible from parent
  • Event Handling - Item click events bubble up to parent
  • Responsive Layout - Grid layout adapts to screen size

Try it: Click the star button to favorite emojis, then click "Show Favorites" to filter the list to only show your favorite emojis. The favorites state is managed globally and persists across pagination and category changes!