Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
52 lines (44 sloc) 1.25 KB

Using qdt-components with React

This is a guide on how you can use qdt-components with React.

  • Live Demo
  • npm install --save qdt-components
  • create a React component that implements qdt-components
import React from 'react';
import PropTypes from 'prop-types';
import QdtComponents from 'qdt-components';

const options = {
  config: {
    host: "yourdomain.com",
    secure: true,
    port: 443,
    prefix: "",
    appId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxx"
  },
  connections: { 
    vizApi: true, 
    engineApi: true 
  }
}

const qdtComponents = new QdtComponents(options.config, options.connections);

export default class QdtComponent extends React.Component {
  static propTypes = {
    type: PropTypes.string.isRequired,
    props: PropTypes.object.isRequired,
  }
  componentDidMount() {
    const { type, props } = this.props;
    qdtComponents.render(type, props, this.node);
  }

  componentWillUnmount() {
    QdtComponents.unmountQdtComponent(this.node)
  }

  render() {
    return (
      <div ref={(node) => { this.node = node; }} />
    );
  }
}

Template

https://github.com/qlik-demo-team/qdt-react-template

You can’t perform that action at this time.