UI Component plugin
UI Components for Quick Brick are simply an npm package exporting a React component.
The folder structure will be something like this:
Package.json
In your package.json, prefix your package name with @applicaster/quick-brick-
if you want your package to be compiled when running on web-based platforms (Samsung TV, LG).
If you want to use the @applicaster/zapplicaster-cli publish_plugin
script, you need to add the following to your package.json
you will need to make the first push of the plugin manually with the --new
flag, but after that, you can use the script to publish. run @applicaster/zapplicaster-cli publish_plugin help
to know more about the options for this CLI command. It will automatically publish to npm, generate your manifests (see below), push your manifests to Zapp. and commit the file changed.
Manifest
The rules for creating a ui component manifest for QuickBrick are the same as the rules for native. The only addition is to flag the plugin as being available for ui_frameworks: ["quickbrick"]
.
if You need your component to apply to TV, make sure you select the right target in your manifest targets: ["tv"]
. Your plugin can support both TV and mobile if you provide both targets to the manifest.
Using the publish script
If you want to use the publish plugin script from @applicaster/zapplicaster-cli
you need to create a file at <root>/manifests/manifest.config.js
. This file contains the code to generate the manifests for all platforms, while maintaining everything in the same place:
The component
the main export of your package is the react component itself. The first thing to do is to use our ZappUIComponent
decorator to automatically bind your component to the Zapp Pipes engine.
From that point, you can use the props to render your component, pull extra data through the redux store, and use all the features available in the QuickBrick packages.
The available props are the following:
Explaination of the props:
- CellRenderer: component to render a cell, pulled from Cell Styles builder config. see usage below;
- component: the data of the ui component in the zapp rivers API. contains, styles, rules, data property, etc, everything defined in the UI builder configuration panel
- navigator: use this to navigate somewhere. push will add an entry to the navigation stack, while replace will reset it
- zappPipesData: contains the data resolved from zapp pipes
Example: