react / Lynx

Interface: Lynx

APIs under lynx global variable that added by ReactLynx.

Example

lynx.registerDataProcessors(...);
lynx.querySelector(...);
lynx.querySelectorAll(...);

Properties

querySelector()

querySelector: (selector: string) => null | Element;

Select the first element matching the given CSS selector in the page.

Parameters

Parameter Type Description
selector string CSS Selector string.

Returns

null | Element

Defined in

@lynx-js/react/runtime/lib/lynx-api.d.ts:323


querySelectorAll()

querySelectorAll: (selector: string) => Element[];

Select all the elements matching the given CSS selector in the page.

Parameters

Parameter Type Description
selector string CSS Selector string.

Returns

Element[]

Defined in

@lynx-js/react/runtime/lib/lynx-api.d.ts:330


registerDataProcessors()

registerDataProcessors: (dataProcessorDefinition: DataProcessorDefinition) => void;

Register DataProcessors. You MUST call this before root.render().

Parameters

Parameter Type
dataProcessorDefinition DataProcessorDefinition

Returns

void

Examples

You MUST call lynx.registerDataProcessors before calling root.render().

import { root } from "@lynx-js/react"

// You MUST call this before `root.render()`
lynx.registerDataProcessors({
  defaultDataProcessor: () => {...} // default DataProcessor
  dataProcessors: {
    getScreenMetricsOverride: () => {...} // named DataProcessor
  }
})

root.render(<App/>);

If you have a class component with static defaultDataProcessor or static dataProcessors, you can use it to register DataProcessors.

import { root, Component } from "@lynx-js/react"

class App extends Component {
  static defaultDataProcessor() {
     ...
  }

  static dataProcessors = {
    getScreenMetricsOverride() {
      ...
    }
  }
}

lynx.registerDataProcessors(App); // You can pass `App` because it has the required shape
root.render(<App/>);

For developers who want fully typed defaultDataProcessor, they can achieve it by extends interface InitDataRaw and InitData.

import { root } from "@lynx-js/react"

interface ExistingInterface {
  somePropertyFromExistingInterface: number
}

declare module '@lynx-js/react' {
  interface InitDataRaw extends ExistingInterface {
    someAnotherCustomProperty: string
  }
}

lynx.registerDataProcessors({
  defaultDataProcessor: (initDataRaw) => {
    initDataRaw.somePropertyFromExistingInterface // will be typed
  }
})

For developers who want fully typed defaultDataProcessor, they can achieve it by extends interface InitDataRaw and InitData.

import { root, useInitData } from "@lynx-js/react"

interface AnotherExistingInterface {
  someAnotherPropertyFromExistingInterface: number
}

declare module '@lynx-js/react' {
  interface InitData extends AnotherExistingInterface {
    someCustomProperty: string
  }
}

root.registerDataProcessors({
  defaultDataProcessor: () => {
    return {
      someCustomProperty: 'value', // will be typed
      someAnotherPropertyFromExistingInterface: 1, // will be typed
    }
  }
})

function App() {
  const initData = useInitData();

  initData.someCustomProperty // will be typed
  initData.someAnotherPropertyFromExistingInterface // will be typed
}

Defined in

@lynx-js/react/runtime/lib/lynx-api.d.ts:317


triggerGlobalEventFromLepus()

triggerGlobalEventFromLepus: (eventName: string, params: any) => void;

An alias of lynx.getJSModule("GlobalEventEmitter").trigger(eventName, params) only in Lepus

Parameters

Parameter Type
eventName string
params any

Returns

void

Defined in

@lynx-js/react/runtime/lib/lynx-api.d.ts:208

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.