@maticonoffice/docspace-react

RU | EN

Этот репозиторий содержит React-компонент Maticon Office DocSpace для встраивания Maticon Office DocSpace в проекты на React.

Обратите внимание: для работы с компонентом требуется Maticon Office DocSpace. Если у вас ещё нет DocSpace, создайте учётную запись.

Предварительные требования

Для выполнения описанных действий необходимы Node.js и npm.

Создание демонстрационного React-приложения с Maticon Office DocSpace

Следующие действия создают базовое React-приложение и устанавливают в него компонент Maticon Office DocSpace.

1. Создайте новый React-проект docspace-react-demo с помощью пакета Create React App:

   npx create-react-app docspace-react-demo

2. Перейдите в созданный каталог:

   cd docspace-react-demo

3. Установите React-компонент Maticon Office DocSpace из npm и сохраните его в package.json с помощью параметра --save:

   npm install --save @maticonoffice/docspace-react

4. Откройте файл ./src/App.js проекта docspace-react-demo и замените его содержимое следующим кодом:

   import React from "react";
   import { DocSpace } from "@maticonoffice/docspace-react";
   
   const onAppReady = function (e) {
     console.log("Maticon Office DocSpace App is ready!");
   };
   
   const onAppError = function (e) {
     console.log(e);
   };
   
   const onSetDocspaceInstance = function (instance) {
     console.log(instance);
   };
   
   export default function App() {
     return (
       <DocSpace
         url="https://example-maticonoffice.ru/"
         config={{
           frameId: "maticonoffice-docspace",
           mode: "manager",
           width: "100%",
           height: "100%",
           events: {
             onAppReady,
             onAppError,
           },
         }}
         onSetDocspaceInstance={onSetDocspaceInstance}
       />
     );
   }

   Замените https://example-maticonoffice.ru/ адресом своего сервера.

   Этот JavaScript-файл создаёт компонент App с базовой конфигурацией Maticon Office DocSpace.

5. Проверьте приложение с помощью сервера разработки Node.js:

   • Чтобы запустить сервер разработки, перейдите в каталог docspace-react-demo и выполните:

     npm run start

   • Чтобы остановить сервер разработки, вернитесь в терминал и нажмите Ctrl+C.

Развёртывание демонстрационного React-приложения

Простой способ развернуть приложение в рабочей среде - установить serve и запустить статический сервер:

1. Глобально установите пакет serve:

   npm install -g serve

2. Раздайте статический сайт через порт 3000:

   serve -s build

   Другой порт можно указать параметром -l или --listen:

   serve -s build -l 4000

3. Чтобы раздать каталог проекта, перейдите в него и выполните команду serve:

   cd docspace-react-demo
   serve

Теперь приложение можно развернуть на созданном сервере:

1. Перейдите в каталог docspace-react-demo и выполните:

   npm run build

   Будет создан каталог build с рабочей сборкой приложения.

2. Скопируйте содержимое каталога docspace-react-demo/build в корневой каталог веб-сервера, например в каталог docspace-react-demo.

   По умолчанию приложение будет доступно по адресу http://localhost:3000.

API

Свойства компонента

Имя	Тип	Значение по умолчанию	Обязательное	Описание
url	string	null	да	Адрес Maticon Office DocSpace.
config	object	null	да	Общий объект конфигурации для открытия файла с токеном. См. Config API.
email	string	null	нет	Адрес электронной почты пользователя для входа в DocSpace.
onRequestPasswordHash	(email: string) => string	null	нет	Функция, вызываемая при передаче email и возвращающая passwordHash для входа в DocSpace.
onUnsuccessLogin	() => void	null	нет	Функция, вызываемая при неудачном входе в учётную запись DocSpace.
onSetDocspaceInstance	(instance: SDKInstance) => void	null	нет	Функция, вызываемая после получения экземпляра DocSpace. Экземпляр предоставляет методы API для работы с DocSpace.

Storybook

Укажите адрес DocSpace в файле .env:

DOCSPACE_URL=https://example-maticonoffice.ru/

Сборка Storybook

npm run build-storybook

Запуск Storybook

npm run storybook

Разработка

Клонирование проекта с GitHub

git clone https://github.com/MaticonOffice/docspace-react

Установка зависимостей проекта

npm install

Тестирование компонента

npm run test

Сборка проекта

npm run rollup

Создание пакета

npm pack

Обратная связь и поддержка

О проблемах, вопросах и предложениях по React-компоненту Maticon Office DocSpace сообщайте в разделе Issues.

Официальный сайт проекта: www.maticonoffice.ru.

Форум поддержки: forum.maticonoffice.ru.