# useDocyrusFieldComponent
URL: /docs/native/hooks/use-docyrus-field-component

Resolve the native form field, value renderer or inline editor for a Docyrus field type — plus the shared FORM_FIELD_MAP / VALUE_RENDERER_MAP registries and IField helpers.

## Installation

```bash
pnpm dlx @docyrus/cli add @docyrus/rn-hooks-use-docyrus-field-component
```

Depends on `@docyrus/rn-form-fields`, `@docyrus/rn-value-renderers` and `@docyrus/rn-editable-value` (installed with it).

## Overview

Native port of the web `useDocyrusFieldComponent`. The registries map every `IFieldType` to native components:

- **`form-field`** — the IField adapter `DocyFieldDynamic`, typed as `ComponentType<DocyrusFormFieldProps>` (`field`, `value`, `onChange`, `record`, `onCompanionChange`, …). `null` for types without a native editor mapping (computed / system types).
- **`value-renderer`** — the `DocyValue*` renderer; unknown types fall back to `DocyValueText`.
- **`editable-value`** — always `EditableValue`, which dispatches by field type.

The web-only kinds `data-grid-cell-variant` and `tanstack-column-def` live with the native data-grid package.

## Usage

```tsx
import { useDocyrusFieldComponent } from '@/hooks/docyrus-native/use-docyrus-field-component';

function FieldRow({ field, record, onChange }) {
  const Form = useDocyrusFieldComponent(field.type, 'form-field');
  const Value = useDocyrusFieldComponent(field.type, 'value-renderer');

  if (!Form) return ;

  return (
    <Form
      field={field}
      value={record[field.slug]}
      record={record}
      onChange={value => onChange(field.slug, value)}
      onCompanionChange={onChange} />
  );
}
```

```tsx
import { extractEnumOptions, toIField } from '@/hooks/docyrus-native/use-docyrus-field-component';

// DataSourceField (app-utils) → IField + inline options
const field = toIField(dataSourceField);
const options = extractEnumOptions(dataSourceField);
```

## API Reference

### useDocyrusFieldComponent(fieldType, kind)

| Param | Type | Description |
|------|------|-------------|
| `fieldType` | `IFieldType` | Field type |
| `kind` | `'form-field' \| 'value-renderer' \| 'editable-value'` | Render context |

Returns `DocyrusFieldComponentResult<K>` — `ComponentType<DocyrusFormFieldProps> \| null`, `ComponentType<DocyValueProps>` or `typeof EditableValue`.

### Exports

| Export | Description |
|------|-------------|
| `FORM_FIELD_MAP` | `IFieldType` → controlled `DocyField*` component |
| `VALUE_RENDERER_MAP` | `IFieldType` → `DocyValue*` renderer |
| `GROUPABLE_FIELD_TYPES` | Field types usable for row grouping |
| `extractEnumOptions(field)` | Inline options from `field.enums` / `options.options` (camel + snake case metadata, user names from `firstname lastname`) |
| `toIField(field)` | Loose `DocyrusFieldLike` → `IField` |
| `getFieldValue(row, slug)` | Safe value read |
| `readFieldFormat(field)` | `DocyrusFieldFormat` from `field.format` with flat fallbacks |
| `DocyValueDynamic` | Dynamic value renderer (re-export) |

### Types

| Type | Description |
|------|-------------|
| `DocyrusFieldComponentKind` | `'form-field' \| 'value-renderer' \| 'editable-value'` |
| `DocyrusFieldComponentResult<K>` | Resolved component type |
| `DocyrusFieldLike` | Loose field shape (IField or DataSourceField) |
| `DocyrusFieldFormat` | `{ currency?, decimalPrecision?, thousandSeparator?, symbolPosition?, ratingMax?, ratingIcon? }` |