Helpers·loomora/Content
⚙Related configs↗Content
A generic data renderer with optional conditional renderers and configurable loading/empty content.
Interactive live playground
Tweak props, change states, and see the live component respond in real time.
How to call
Import directly from the Loomora package root. For projects without Tailwind CSS, ensure loomora/dist/index.css is imported once in your root layout.
import { Content } from 'loomora'
<Content
data={items}
render={(item) => <span key={item.id}>{item.name}</span>}
empty={<p>No items yet.</p>}
/>API reference
Important public props and how they affect rendering.
| Prop | Type | Default | Description |
|---|---|---|---|
| data | T[] | required | Items to render. |
| render | (item: T, index: number) => ReactNode | required | Primary item renderer. |
| renderConditions | conditional renderer[] | [] | Optional render rules for matching items. |
| loading / loader | boolean / ReactNode | false / default | Loading state and placeholder content. |
| empty | ReactNode | — | Content shown for an empty collection. |