# ContentResolver

```ts
import { ContentResolver } from 'cx/widgets';
```



`ContentResolver` dynamically resolves content at runtime based on data. Use it when the content to display is unknown at build time, depends on data values, or needs to be lazy loaded.

```tsx
import { createModel } from "cx/data";
import {
  Checkbox,
  ContentResolver,
  DateField,
  LookupField,
  Switch,
  TextField,
} from "cx/widgets";


interface Model {
  fieldType: string;
  text: string;
  date: string;
  checked: boolean;
}

const m = createModel<Model>();

const fieldTypes = [
  { id: "textfield", text: "TextField" },
  { id: "datefield", text: "DateField" },
  { id: "checkbox", text: "Checkbox" },
  { id: "switch", text: "Switch" },
];

export default (
  <div className="flex items-center gap-4">
    <LookupField value={m.fieldType} options={fieldTypes} label="Field Type" />
    <ContentResolver
      params={m.fieldType}
      onResolve={(type) => {
        switch (type) {
          case "textfield":
            return <TextField value={m.text} />;
          case "datefield":
            return <DateField value={m.date} />;
          case "checkbox":
            return <Checkbox value={m.checked}>Checked</Checkbox>;
          case "switch":
            return <Switch value={m.checked} />;
          default:
            return null;
        }
      }}
    />
  </div>
);

```

## How It Works

1. The `params` prop binds to a value in the store
2. When `params` changes, `onResolve` is called with the new value
3. `onResolve` returns the widget configuration to render
4. For async loading, `onResolve` can return a Promise
5. Children are displayed as default content while loading

## Structured Params

The `params` prop can be a structured object with multiple bindings:

```jsx
<ContentResolver
  params={{
    type: m.fieldType,
    required: m.isRequired,
  }}
  onResolve={({ type, required }) => {
    // resolve based on multiple parameters
  }}
/>
```

When any of the bound values change, `onResolve` is called with the updated object.

## Configuration

| Property | Type | Description |
| -------- | ---- | ----------- |
| `params` | `any` | Parameter binding. Can be a single value or structured object. Content is recreated when params change. |
| `onResolve` | `function` | Callback taking `params` and returning widget configuration or a Promise. |
| `mode` | `string` | How resolved content combines with children: `replace`, `prepend`, or `append`. Default is `replace`. |
| `loading` | `boolean` | Writable binding set to `true` while a Promise is resolving. |
| `children` | `any` | Default content displayed while `onResolve` Promise is loading. |