Sets context for connection to the Qlik engine and theming.


We recommend that you wrap your React document with the Motor component. This handles two things:

  • Connection to the Qlik Engine (you can pass configuration or the engine object directly)
  • Theming

In the example below, we are connecting to a Qlik site, hosted on localhost port 19077, to an app called myAwesomeapp.

We are also making a change to the base theme, by changing the brand color to red.

import { Motor } from @motor-js/core
host: "localhost",
secure: false,
port: 19077,
prefix: "",
appId: 'myAwesomeApp',
global: {
color: {
brand: 'red'

The Motor component now also contains the login component by default. You can customise this by adding a logo via the props and changing the text and color in the base theme.


PropDescriptionOptions / Example
configConfiguration object to connect to the Qlik Engine, only set this if used outside of the Motor component{
host: 'string',
secure: 'boolean',
port: 'number',
prefix: 'string',
appId: 'string'
qsc: 'boolean'
webIntId: 'string', }
themeCustom styles to merge with the base theme"object"
capabilityAPILoad the capability APIs into your mashupboolean
engineQlik Engine object, output of the useEngine hook. If you are not setting the config prop, you can pass the Qlik engine object directly via this prop. This is particularly useful if you are connecting to your Qlik site server side (using JWT or certificates)."object"
logoPath to logo to appear in the login component"string"
logoHeightLogo height"string"
logoWidthLogo width"string"