Skip to main content

Content components

Use the content module to render app-owned content collections or a detail view backed by a FHIR Composition. These are presentation components: the app loads the content, applies access rules, and handles navigation.

Choose the surface​

  • Use ContentCard for one item in a grid or feed.
  • Use ContentList for a titled or horizontally scrolling collection.
  • Use ContentDetail when a Composition should provide the content for a detail screen.
import { ContentCard } from "@ovok/native/content";

<ContentCard onPress={() => openContent(item.id)}>
  <ContentCard.Cover uri={item.cover} />
  <ContentCard.Content>
    <ContentCard.Title>{item.title}</ContentCard.Title>
    {item.summary}
  </ContentCard.Content>
</ContentCard>

The card and list primitives can render your own view model. They do not fetch content or decide which items a user can see. For ContentDetail, load and authorize the Composition in the app, then pass it through the component's composition prop; the component provides it to useComposition descendants.

Keep content behavior in the app​

Own loading, empty, and error states at the screen level. Handle links, downloads, and analytics in the callbacks you pass to the components. Use the composition hook only inside the provider subtree, and do not treat a rendered resource as proof that the user is authorized to access it.

References​