CreateMeta React Component

This package provides a CreateMeta React component for integrating with a meta-creation system. It allows handling files (such as PDFs) and signatories, using base64-encoded file data. The component also integrates react-pdf for rendering PDFs in the browser.

Installation

To use this package, install it along with its peer dependencies:

npm install @telecomsoft/dss-create-meta-react react-pdf

If you don't use vite js project run this command

cp ./node_modules/pdfjs-dist/legacy/build/pdf.worker.min.mjs ./public/

Usage

Here’s a basic example of how to use the CreateMeta component in your React app:

import { CreateMeta } from '@telecomsoft/dss-create-meta-react';
import data from './data.json';

//If you don't use vite js project use this line
//pdfjs.GlobalWorkerOptions.workerSrc = `/pdf.worker.min.mjs`;

function App() {
  const fileBase64Value = data.fileBase64; // Base64 encoded file content

  const signatories = [
    {
      priority: 1,
      fio: "test1",
      identifier: "32432432554354",
    },
    {
      priority: 2,
      fio: "test2",
      identifier: "43254354354354",
    },
    {
      priority: 3,
      fio: "test3",
      identifier: "53456564234324",
    },
  ];

  return (
    <CreateMeta
      locale="ru"
      base_url={""} // Your base URL
      auth_url={""} // Your auth URL
      create_url={""} // Your create meta URL
      client_id={""} // Your client ID
      client_secret={""} // Your client secret
      external_document_id={""} // Your external document ID
      signatories={signatories} // List of signatories
      file_base64={fileBase64Value} // Base64 encoded file
      handleSuccessfullySaved={() => {
        if (window) window.location.reload(); // Reload on success
      }}
    />
  );
}

export default App;

Component Props

| Prop | Type | Required | Description | |--------------------------|------------|----------|----------------------------------------------------------------------------------------------| | locale | string | Yes | Locale setting (e.g., "ru", "en") | | base_url | string | Yes | Base URL for API calls | | auth_url | string | Yes | URL for authentication | | create_url | string | Yes | URL for creating meta data | | client_id | string | Yes | Client ID for authentication | | client_secret | string | Yes | Client secret for authentication | | external_document_id | string | Yes | External document identifier | | signatories | array | Yes | Array of signatories, each with priority, fio, and identifier properties | | file_base64 | string | Yes | Base64 encoded file content (typically a PDF) | | handleSuccessfullySaved| function | Yes | Callback function to handle post-save actions, called after the file is successfully saved. |

Signatories Object Example

The signatories prop expects an array of objects with the following structure:

[
  {
    "priority": 1,
    "fio": "John Doe",
    "identifier": "1234567890"
  },
  {
    "priority": 2,
    "fio": "Jane Doe",
    "identifier": "0987654321"
  }
]

PDF File (Base64)

The file_base64 prop should be a Base64-encoded string representing the file content, typically a PDF.

Example:

{
  "fileBase64": "JVBERi0xLjQKJdP0zOEKMSAwIG9iago8PAov..."
}

Packages Used

• react-pdf: Used for rendering PDF documents in the browser.
• typescript: For static typing and improved developer experience.
• vite: A fast build tool optimized for modern web development with instant HMR.
• react: A popular JavaScript library for building user interfaces.

Development

To develop locally, clone the repository and install the dependencies:

npm install

Start the development server:

npm run dev

Build the project for production:

npm run build

License

This project is licensed under the MIT License.