# HyperReactXML Customization Guide

HyperReactXML is built so users can customize behavior without changing the SDK source.

## Theme

```tsx
const theme = {
  primaryColor: '#2563eb',
  dangerColor: '#dc2626',
  successColor: '#16a34a',
  borderRadius: '8px',
  spacing: '12px',
  fontFamily: 'Inter, system-ui, sans-serif',
  styles: {
    card: { boxShadow: '0 8px 30px rgba(15, 23, 42, 0.08)' },
    button: { textTransform: 'none' },
    table: { fontSize: 14 },
  },
};
```

## Custom Components

```tsx
import {
  registerHyperReactXMLComponent,
  type HyperReactXMLComponentProps,
} from 'hyper-react-xml';

function Money({ node, context }: HyperReactXMLComponentProps) {
  const value = node.attributes.field ? context.values[node.attributes.field] : 0;
  return <strong>{new Intl.NumberFormat('en-IN').format(Number(value ?? 0))}</strong>;
}

registerHyperReactXMLComponent('Money', Money);
```

XML:

```xml
<Money field="amount" />
```

## Cell Renderers

```tsx
const cellRenderers = {
  statusBadge: ({ value, context }) => (
    <span style={{ color: value === 'ACTIVE' ? context.theme.successColor : context.theme.mutedTextColor }}>
      {String(value)}
    </span>
  ),
};
```

XML:

```xml
<Column field="status" label="Status" renderer="statusBadge" />
```

## Permissions

```xml
<Button action="createUser" permission="USER_CREATE">Create</Button>
<Action label="Delete" action="deleteUser" permission="USER_DELETE" />
```

```tsx
<HyperReactXMLRenderer permissions={['USER_CREATE']} />
```

## Translations

```tsx
const translations = {
  en: {
    save: 'Save',
  },
  hi: {
    save: 'Save',
  },
};
```

```xml
<Button textKey="save" action="saveUser" />
```

## Conditional Customization

```xml
<Input name="gst" label="GST Number" requiredWhen="type=BUSINESS && country=IN" />
<Button action="approve" disabledWhen="status!=PENDING">Approve</Button>
```

## Parser Cache

```ts
import { configureHyperReactXMLParserCache } from 'hyper-react-xml';

configureHyperReactXMLParserCache({ maxSize: 200 });
```