Lynx
Guide
APIs
Blog
Contribute
Guide
APIs
Blog
Contribute

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

Except as otherwise noted, this work is licensed under a Creative Commons Attribution 4.0 International License, and code samples are licensed under the Apache License 2.0.