Model.Unit.tsx files are presentational components responsible for rendering a model's summary view, primarily as Cards or List Items. They provide a standard way to display model instances across the application.
File Location and Naming Convention
Unit files are located alongside other model definitions:
Core Interface: ModelProps
The @akanjs/client package provides generic props for uniform Unit component implementation.
Basic Usage pattern
Standard Card Component
The most common export is 'Card'. It should accept 'href' for navigation and 'className' for external styling.
Advanced Patterns
Handling Actions & State
Units can contain interactive elements like toggle buttons or status indicators.
Integration with Load.Units
Load.Units is a powerful utility component from @akanjs/ui that handles data fetching, pagination, and list rendering for models. It is the primary way to display lists of Unit components.
Key Props
Option
Type
Default
Description
Example
init
ClientInit<T, L>
-
The initial data source token.
renderItem
(model, idx) => ReactNode
-
Render function for each item.
renderList
(list) => ReactNode
-
Alternative to renderItem. Gives full control.
renderEmpty
() => ReactNode
-
Component to render when empty.
pagination
boolean
true
Whether to enable pagination.
filter
(item, idx) => boolean
-
Client-side filter function.
sort
(a, b) => number
-
Client-side sort function.
className
string
-
Class for the container.
init:ClientInit<T, L>:-
The initial data source token.
renderItem:(model, idx) => ReactNode:-
Render function for each item.
renderList:(list) => ReactNode:-
Alternative to renderItem. Gives full control.
renderEmpty:() => ReactNode:-
Component to render when empty.
pagination:boolean:true
Whether to enable pagination.
filter:(item, idx) => boolean:-
Client-side filter function.
sort:(a, b) => number:-
Client-side sort function.
className:string:-
Class for the container.
Real-world Implementation Examples
1. Inside a Zone Component
Zone components often wrap Load.Units to provide a complete 'section' of the UI managed by a store slice.
2. Direct List Rendering (without Load.Units)
For static lists or when data is already available as an array, map over the data and render Unit components directly. This pattern is highly effective for SSR (Server-Side Rendering) where data is pre-fetched and passed as props, avoiding client-side loading states.
Best Practices
🎨Consistent Styling
Use 'clsx' for merging external className props to allow easy overrides.
🔗Proper Navigation
Use <Link> from @akanjs/ui for internal navigation to ensure efficient routing.
⚡Performance First
Use 'Light' types (cnst.LightModel) for performance in lists. Avoid loading full heavy models in Units.
🧩Logic Separation
Keep logic minimal in Unit components. Delegate complex interactions (like buttons) to separate Utility components.
♿Accessibility
Ensure standard HTML semantics (headings, lists) for accessibility.