On this page
FAQsQ: Why can this hook crash when used under the App root component?Q: Where does runtime panel config come from?

usePanelConfig()

Requires:
@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
PropertyTypeDescription
initializedbooleanWhether initialization is complete
IoT product configuration, supported only on the public panel
IoT feature configuration
Cloud timers and navigation links configured on the IoT platform
Miniapp theme configuration data

Valid Values

ThemeValue.rangeType
ValueDescriptionSince
bool--
enum--
blank--
IoTPublicConfig.theme
ValueDescriptionSince
default--
light--
FunConfig.tyabirysr4_app
ValueDescriptionSince
follow--
--app-B1--
FunConfig.tyabis5d9w_app
ValueDescriptionSince
follow--
--app-M1--

Examples

Example

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.