Motor

Sets context for connection to the Qlik engine and theming.#

Usage#

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
//...
<Motor 
  config={{
    host: "localhost",
    secure: false,
    port: 19077,
    prefix: "",
    appId: 'myAwesomeApp',
  }}
  theme={{
    global: {
      color: {
        brand: 'red'
      }
    }
  }}
>

//...

</Motor>

info

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.

Props#

Prop	Description	Options / Example
`config`	Configuration 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', }
`theme`	Custom styles to merge with the base theme	"object"
`capabilityAPI`	Load the capability APIs into your mashup	boolean
`engine`	Qlik 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"
`logo`	Path to logo to appear in the login component	"string"
`logoHeight`	Logo height	"string"
`logoWidth`	Logo width	"string"