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