---
name: "useTopBarTitle"
mode: "api"
versionRequirements:
  - { name: "@ray-js/panel-sdk", version: "1.0.0" }
title: "useTopBarTitle"
---

## useTopBarTitle

> [VERSION] @ray-js/panel-sdk >= 1.0.0

> 💡 This Hook automatically updates the navigation bar title when title changes.
> It relies on the setNavigationBarTitle API from @ray-js/ray to set the mini program navigation bar title.
> If the title length exceeds the number of characters specified by ellipsis, it will be truncated and suffixed with ...

### Description

Set the top navigation bar title in the mini program, with automatic truncation for long text

### Parameters

`Params`

| Parameter | Type | Required | Description |
| --- | --- | --- | --- |
| `title` | `string` | Yes | The title text to set |
| `ellipsis` | `number` | No | Maximum title length in characters; adds an ellipsis when exceeded. Default is 14 |

### Return Value

Type: `(titleRes: string) => void[]`

Tuple [setTitle], containing a function to manually set the title

### Examples

#### Example

```tsx
import { useTopBarTitle } from '@ray-js/panel-sdk';

function DevicePage() {
  // Automatically set the top title; longer than 14 characters will be truncated
  const [setTitle] = useTopBarTitle('Smart lighting control panel');

  // You can also update the title manually
  const handleRename = (newName: string) => setTitle(newName);
}
```