rte-controller-react-native v0.4.0-alpha.2
rte-controller-react-native
RTE UI controller is a module to be used in the UI resource itself to facilitate the integration with RTE world.
How to Use?
Install
cd path/to/your project
npm i rte-controller-react-native --save-dev
Use
Create RteContext instance
import { createDefaultRteContext } from "rte-controller-base";
// We need to init RteContext before rendering any widget.
const rteContext = await createDefaultRteContext({
uri: "http://192.168.0.104:8001/",
graph_id: "0",
extension_group: "default_ui_gateway_extension_ts_group",
extension: "default_ui_gateway_extension_ts",
});
Use with RTE layout template
import { RteLayoutComp } from "rte-controller-react-native";
return (
<RteLayoutComp rteContext={rteContext} />
);
Use with your own layouts
import {
RteLayoutRenderOptions,
ExtensionContainer,
} from "rte-controller-react-native";
return (
<View
style={{
width: "200px",
}}
>
<ExtensionContainer
extension="default_ui_extension_ts"
rteContext={rteContext}
options={options}
/>
</View>
);
You can use widgetProps
in ExtensionContainer
to define any props, which will be passed to the widget component directly.
Customize the timing of receiving message
By default, rte-controller will start to receive message when all the widgets are mounted.
You can customize with setWidgetMountedListener()
in RteContext
. For example:
import {
RteContext,
RteUiWidgetInfo,
} from 'rte-controller';
rteContext.setWidgetMountedListener(
(
rteContext: RteContext,
widget: RteUiWidgetInfo,
error?: Error,
): void => {
console.log(
`The widget is ready, ${JSON.stringify(widget)}, error: ${error}`,
);
// Calling 'readyToReceiveExtensionMessage()' to open the message channel between the App and RTE Extension, and will receive events from RTE Extension if any.
setTimeout(() => {
rteContext.readyToReceiveExtensionMessage();
}, 5000);
},
);
Keep in mind that you have to call
readyToReceiveExtensionMessage()
yourself when the App is ready to receive messages from RTE Extension.
Subscribe events
You can subscribe event from RTE Extension like the UI Widget with subscribeEvent()
in RteContext
. For example:
rteContext.subscribeEvent({
extension: 'default_ui_extension_ts',
handler: (msg: RteUiWidgetMsg) => {
console.log(
`Receive message from default_ui_extension_ts: ${JSON.stringify(
msg,
)}`,
);
},
});
The extension
and type
are used to filter the events, you have to specify at least one. And of course, you can specify both of them.
And you can use unsubscribeEvent()
to cancel the subscription.
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago