Smartflow-new-app NPM

Instalation in react

The web component can be integrated as in the example bellow, but first you need to have the api key.

import React from "react";
import "./App.css";
import { QualifiedElectronicSignature } from "smartflow-new-app";
function App() {
  return (
    <div className="App">
      <QualifiedElectronicSignature
        apiKey="xxxxxxxxxxx"
        fullMode={true}
        env={"prod"}
      />
    </div>
  );
}
export default App;

Installation for angular

Install package from npm npm i smartflow-new-app and BootStrap npm install -D -S bootstrap)
Update tsconfig.json -> add “jsx”:”react” ad compile options
Install react and react-dom and import in wrapper component npm i --save -D @types/react @types/react-dom)
For every exported component by smart-flow package, create an wrapper angular component: import { QualifiedElectronicSignature } from 'smartflow-new-app';
Add in template mounting point for package component: template: '<div #customReactComponentContainer></div>',
Select mounting point using

 @ViewChild(containerElementName, { static: true }) containerRef!: ElementRef;

Create a const variable: const containerElementName = 'customReactComponentContainer';
Create a render method:

private render() {
    const props: any = {
      apiKey: 'lPgMzXhiyLu7mb2lmgr9ALzjsAV0MI7d',
      env: 'preprod',
    };

    ReactDOM.render(
      React.createElement(QualifiedElectronicSignature, props),
      this.containerRef.nativeElement
    );
  }

On ngAfterViewInit call render function
The final version should look like this:

import { ElementRef, ViewChild } from '@angular/core';
import { Component } from '@angular/core';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { QualifiedElectronicSignature } from 'smartflow-new-app';
const containerElementName = 'customReactComponentContainer';
@Component({
  selector: 'app-root',
  template: '<div #customReactComponentContainer></div>',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  @ViewChild(containerElementName, { static: true }) containerRef!: ElementRef;

  private render() {
    const props: any = {
      apiKey: 'lPgMzXhiyLu7mb2lmgr9ALzjsAV0MI7d',
      env: 'preprod',
    };
    ReactDOM.render(
      React.createElement(QualifiedElectronicSignature, props),
      this.containerRef.nativeElement
    );
  }

  ngAfterViewInit(): void {
    this.render();
  }
}