---
name: "usePanelConfig"
mode: "api"
versionRequirements:
  - { name: "@ray-js/panel-sdk", version: "1.12.0" }
title: "usePanelConfig"
summary: "Get runtime product config for a panel miniapp, including theme, cloud timer, jump links, and custom config."
---

## usePanelConfig

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

### Description

Retrieve the product configuration for the panel mini program at runtime, such as scheduling settings, navigation link settings, custom settings, etc.

### Parameters

None


### Return Value

Type: `Config`

Config object that includes iot (IoT public configuration), fun (feature configuration), bic (cloud timers/navigation links), themeInfo (theme CSS variables), and initialized (whether loading is complete)

##### Config

| Property | Type | Description |
| --- | --- | --- |
| `initialized` | `boolean` | Whether initialization is complete |
| `iot` | `IoTPublicConfig` | IoT product configuration, supported only on the public panel |
| `fun` | `FunConfig` | IoT feature configuration |
| `bic` | `CloudConfig` | Cloud timers and navigation links configured on the IoT platform |
| `themeInfo` | `Record<string, any>` | Miniapp theme configuration data |

### Referenced Types

##### `interface` IoTPublicConfig

| Property | Type | Deprecated | Description |
| --- | --- | --- | --- |
| `background` | `ThemeValue` | - | Background image configuration |
| `cloud` | `CloudConfig` | 是: Please use the top-level `bic` field | Cloud timers and navigation links configured on the IoT platform |
| `dps` | `any` | - | Configuration items related to device DPs |
| `fontColor` | `ThemeValue` | - | Font color configuration |
| `global` | `GlobalConfig` | - | Global configuration options |
| `theme` | `"default" \| "light"` | - | Theme settings: dark or light |
| `themeColor` | `ThemeValue` | - | Theme color configuration options |
| `themeImage` | `ThemeValue` | - | Theme image configuration options |
| `subUiId` | `string` | - | Sub UI ID, supported only on the public panel |
| `timestamp` | `number` | - | Last updated time of the UI configuration |
| `other` | `Record<string, any>` | - | Other configuration options |

##### `interface` FunConfig

| Property | Type | Description |
| --- | --- | --- |
| `tyabirysr4` | `string` | Background color, currently supported only in the Tuya official mini program |
| `tyabirysr4_app` | `"follow" \| "--app-B1"` | Background color follow strategy: 'follow' means inherit from the App; otherwise, specify the App variable path to replace. Currently supported only in the Tuya official mini program |
| `tyabis5d9w` | `string` | Theme color, currently supported only in the Tuya official mini program |
| `tyabis5d9w_app` | `"follow" \| "--app-M1"` | Theme color follow strategy: 'follow' means inherit from the App; otherwise, specify the App variable path to replace. Currently supported only in the Tuya official mini program |

##### `interface` CloudConfig

| Property | Type | Description |
| --- | --- | --- |
| `jump_url` | `JumpUrlConfig` | Navigation link configuration |
| `timer` | `TimerConfig` | Cloud scheduling configuration |

##### `interface` ThemeValue

| Property | Type | Description |
| --- | --- | --- |
| `rangeType` | `"bool" \| "enum" \| "blank"` | Theme value range type |
| `type` | `string` | Theme value type |
| `value` | `Object` | Theme value initialization |

##### `interface` GlobalConfig

| Property | Type | Description |
| --- | --- | --- |
| `background` | `string` | Background configuration |
| `fontColor` | `string` | Font color configuration |
| `themeColor` | `string` | Theme color configuration |

##### `interface` JumpUrlConfig

| Property | Type | Description |
| --- | --- | --- |
| `code` | `"jump_url"` | Navigation link config code |
| `description` | `string` | Navigation link config description |
| `name` | `string` | Navigation link config name |
| `selected` | `boolean` | Whether the navigation link config is selected |

##### `interface` TimerConfig

| Property | Type | Description |
| --- | --- | --- |
| `code` | `"timer"` | Cloud schedule config code |
| `description` | `string` | Cloud schedule config description |
| `name` | `string` | Cloud schedule config name |
| `selected` | `boolean` | Whether the cloud schedule config is selected |

##### `type` ThemeValue.value

| Property | Type | Description |
| --- | --- | --- |
| `initialize` | `string` | Default initial value of the theme configuration |


### Examples

#### Example

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

function ThemeProvider({ children }) {
  const config = usePanelConfig();

  if (!config.initialized) {
    return <Loading />;
  }

  const bgColor = config.iot?.global?.background;
  return <View style={{ backgroundColor: bgColor }}>{children}</View>;
}
```


### FAQs

#### Q: Why can this hook crash when used under the App root component?

A: `usePanelConfig` depends on the Page `ready` event internally. Do not use this hook directly under the App root component before the first page render is complete.

#### Q: Where does runtime panel config come from?

The images below show:

- Image 1: Timer and jump-link config, corresponding to `panelConfig.bic`.
- Images 2 and 3: Custom cloud capability entry and config page, corresponding to `panelConfig.fun`.

<Image src="/images/panel/panel-config1.en-US.png" style={{ width: 1024, border: 'solid 1px #ccc' }} />
<Image src="/images/panel/panel-config2.en-US.png" style={{ width: 1024, border: 'solid 1px #ccc' }} />
<Image src="/images/panel/panel-config3.en-US.png" style={{ width: 1024, border: 'solid 1px #ccc' }} />