# Composition context

Canonical page: https://docs.ovok.com/native-sdk/guide/components/content/advanced-api

`ContentDetail` provides its `composition` prop through `CompositionContext`. Use
`useComposition` in a custom child when the layout needs access to that resource
without passing it through every intermediate component.

```tsx
import { ContentDetail, useComposition } from "@ovok/native/content";

function ResourceLabel() {
  const { composition } = useComposition();
  return <Text>{composition?.title}</Text>;
}

<ContentDetail composition={composition}>
  <ResourceLabel />
</ContentDetail>
```

`useComposition` throws when rendered outside `ContentDetail`. The context exposes
the resource supplied by the parent; it does not fetch or authorize it.

## Exports [#exports]

- `CompositionContext` and `CompositionContextType` for advanced composition.
- `useComposition` for descendants of `ContentDetail`.

Prefer the `ContentDetail` provider over setting the context directly.