GlobalProps

lynx.__globalProps is a global object that you can access from anywhere.

It is read-only in the front-end code, you cannot modify its value.
The client can set and update its value by calling APIs provided by the Lynx SDK.
Every time the client performs an update, it will trigger the onGlobalPropsChanged event, followed by a re-rendering of the entire page.

Usage

// The properties within the `lynx.__globalProps` object are not managed by Lynx itself.
// Therefore, you must extend its interface yourself.
declare module '@lynx-js/types' {
  interface GlobalProps {
    appTheme: string;
    title: string;
  }
}

function App() {
  const themeClass = useMemo(
    () => `theme-${lynx.__globalProps.appTheme}`,
    [lynx.__globalProps.appTheme],
  );

  return (
    <view class={themeClass}>
      <text>{lynx.__globalProps.title}</text>
    </view>
  );
}

Event Listening

You can listen for changes to __globalProps in your component.

import { useLynxGlobalEventListener } from '@lynx-js/react';

export function App() {
  useLynxGlobalEventListener('onGlobalPropsChanged', () => {
    console.log('onGlobalPropsChanged', lynx.__globalProps);
  });

  return <view />;
}

Client side

__globalProps can be updated through APIs provided by LynxView.

Android

void updateGlobalProps(@NonNull Map<String, Object> props)

void updateGlobalProps(@NonNull TemplateData props)

iOS

- (void)updateGlobalPropsWithDictionary:(NSDictionary<NSString*, id>*)data

- (void)updateGlobalPropsWithTemplateData:(LynxTemplateData*)data

Compatibility

LCD tables only load in the browser

#GlobalProps

#Usage

#Event Listening

#Client side

#Android

#iOS