# defineDisplayReactor

> **defineDisplayReactor**\<`Service`\>(`params`): [`DefineReactorResult`](https://ic-reactor.b3pay.net/v3/libs/type-aliases/definereactorresult/)\<`Service`, `"display"`, [`DisplayReactor`](https://ic-reactor.b3pay.net/v3/libs/classes/displayreactor/)\<`Service`, `"display"`\>\>

Defined in: [react/src/defineDisplayReactor.ts:50](https://github.com/B3Pay/ic-reactor/blob/f1956947ae037304fce1675a38695964c1aa9e32/packages/react/src/defineDisplayReactor.ts#L50)

One-call bootstrap for a [DisplayReactor](https://ic-reactor.b3pay.net/v3/libs/classes/displayreactor/) and its React hooks: the
display counterpart of `defineReactor`, taking the same options.

A DisplayReactor takes and returns UI-friendly values — text for
`Principal`, `nat`, `int` and 64-bit integers, hex for blobs — which suits
forms and components. Its codecs are built on zod, so this adds zod to the
bundle. `defineReactor`, which builds a plain `Reactor` with raw Candid
values, does not need zod, but until its deprecated `display` flag is removed
at the next major it bundles zod anyway; `createActorHooks(new Reactor(...))`
is the setup without it.

Replaces `defineReactor({ display: true })`, which is deprecated.

## Type Parameters

### Service

`Service` = [`BaseActor`](https://ic-reactor.b3pay.net/v3/libs/type-aliases/baseactor/)

## Parameters

### params

[`DefineDisplayReactorOptions`](https://ic-reactor.b3pay.net/v3/libs/interfaces/definedisplayreactoroptions/)\<`Service`\>

## Returns

[`DefineReactorResult`](https://ic-reactor.b3pay.net/v3/libs/type-aliases/definereactorresult/)\<`Service`, `"display"`, [`DisplayReactor`](https://ic-reactor.b3pay.net/v3/libs/classes/displayreactor/)\<`Service`, `"display"`\>\>

## Example

```typescript
import { defineDisplayReactor } from "@ic-reactor/react"
import { idlFactory, type _SERVICE } from "./declarations/backend"

export const { reactor, useActorQuery, useActorMutation, useAuth } =
  defineDisplayReactor<_SERVICE>({
    name: "backend",
    idlFactory,
    canisterId: "rrkah-fqaaa-aaaaa-aaaaq-cai",
  })

function Balance() {
  // `nat` arrives as text, ready to render.
  const { data } = useActorQuery({ functionName: "get_balance" })
  return <span>{data}</span>
}
```