The React Framework for Qlik Sense Mashups | The React Framework for Qlik Sense Mashups

Installation

Install the source files via NPM.

npm install @motor-js/core

Or download our starter dashboard.

Download

Usage

Connect to your Qlik site through our Motor component and then use the components without any additional setup.

import { Filter, Motor } from '@motor-js/core'

<Motor 
  config={ /* Connect to your Qlik site */ }
  theme={ /* Theme your Mashup */ }
>
  //...
  <Filter dimension=['AwesomeDimension'] />
  //...
</Motor>

Explore the Docs

Reasons you'll love motor

Free and Open Source

Powerful Theming

Responsive Charts

Awesome Hooks

Enterprise Support Available

Typescript Support

We are adding features and would love your feedback!
Get in touch via chat or on Spectrum

View Community

Custom Charts Powered by the Engine

Motor js' charts are fully customisable through our theme object. We also support the Capability APIs for quick and easy embedding in your React project

import { Motor, Bar, Filter } from '@motor-js/core'

<Motor 
  config={ /* Connect to your Qlik site */ }
  theme={{
    global: {
      color: { brand: 'blue' },
      chart: {
        gridStyles: { 
          rows: { 
            stroke: '#EDEDED',
            strokeDasharray: 0,
            numTicks: 6
          },
          columns: { stroke: 'none' },
        },
        yTickStyles: { stroke: 'none' }
      }
    },
  }} 
>
  //...
  <Filter dimension={['Month']} />
  <Bar 
    width={800}
    height={350}
    colorTheme='divergent13'
    showLegend={false}
    showLabels={false}
    numMeasureTicks={6}
    stacked
    cols={[
      { 
        qField: '[Month]', 
        qLabel: 'Month'
      },
      { 
        qField: '[Product Group Desc]',
        qLabel: 'Product Group'
      },
      { 
        qField: '=sum([Sales Amount])',
        qLabel: 'Sales'
      },
    ]}
  />
  //...
</Motor>

Need to build a custom Qlik solution?