Data Lake Widget

The Data Lake Widget allows users to join a project by providing an email and other relevant details. This widget can be used in both React and Vue applications.

Installation

To install the widget, run the following command:

npm install datalake-widget

Usage

Props

• accessKey (string, required): Project access key generated via Data Lake App.
• projectHash (string, required): Hash of the project to join.
• email (string, optional): Email of the user who wants to join the project. If the value is empty, the widget will show an email input.
• title (string, optional): Title of the widget.
• language (string, optional, default: pl): Language of the confirmation email.
• button (string, optional, default: Give Consents): Button text.
• iframeWidth (number, optional, default: 900): Width of the iframe window.
• iframeHeight (number, optional, default: 700): Height of the iframe window.
• onTransactionStatusUpdate: (status: IStatus) => void (callback, optional): returns transaction status after each status check. 2 - transaction is pending; 1 - transaction is completed; 0 - transaction is failed;
• onFormSubmit: (formData: IFormData) => void (callback, optional): returns form data submitted by user.
• onError: (error: string) => void (callback, optional): returns string error message.

Example of Usage in React

To use the widget in a React application, import the ReactInviteButton component and include it in your JSX.

Example:

import React from 'react';
import { ReactInviteButton } from 'datalake-widget';
import 'datalake-widget/dist/style.css';

const App = () => {
	return (
		<div>
			<ReactInviteButton
				accessKey="your-access-key"
				projectHash="your-project-hash"
				title="Your Project Title"
			/>
		</div>
	);
};

export default App;

Example of Usage in Vue

To use the widget in a Vue application, import the VueInviteButton component and register it either globally or locally within a component.

Example:

main.js

import { createApp } from 'vue';
import App from './App.vue';
import { VueInviteButton } from 'datalake-widget';
import 'datalake-widget/dist/style.css';

const app = createApp(App);
app.component('VueInviteButton', VueInviteButton);
app.mount('#app');

App.vue

<template>
  <div id="app">
    <VueInviteButton
      apiKey="your-api-key"
      projectHash="your-project-hash"
      title="Your Project Title"
    />
  </div>
</template>

<script>
import { VueInviteButton } from 'datalake-widget';
import 'datalake-widget/dist/style.css';

export default {
  components: {
	  VueInviteButton,
  },
};
</script>

<style></style>