Skip to main content

Component

type Component = 
  | BoxGroup
  | ButtonGroup
  | CheckboxGroup
  | ComboBoxGroup
  | IFrameGroup
  | ImageGroup
  | InputGroup
  | LabelGroup
  | SkeletonGroup
  | TextGroup
  | TextAreaGroup
  | ToggleButtonGroup
  | IconButtonGroup
  | LinkGroup;

View source on GitHub

A component that is used to add components into Box. Only components that are embedded into DOM can be wrapped (toast, modal dialog, etc. cannot be wrapped).

Example​

import {
  IBox,
  IText,
  IButton,
  ButtonSize,
  Components,
  Component,
  Actions,
  IToast,
  ToastType,
} from "@onlyoffice/docspace-plugin-sdk";

const title: IText = {
  text: "Plugin Settings",
  fontSize: "18px",
  fontWeight: 600,
};

const button: IButton = {
  label: "Save Changes",
  onClick: () => {
    return {
      actions: [Actions.showToast],
      toastProps: [{
        title: "Success",
        type: ToastType.success,
      }]
    };
  },
  size: ButtonSize.normal,
  primary: true
};

// Create a settings panel with text and button
const container: IBox = {
  paddingProp: "16px",
  backgroundProp: "#f8f9f9",
  children: [
    {
      component: Components.text,
      props: title
    },
    {
      component: Components.button,
      props: button
    }
  ]
};

// Combine components into a layout
const settingsPanel: Component = {
  component: Components.box,
  props: container
};

BoxGroup​

type BoxGroup = {
  component: box;
  props: IBox;
  contextName?: string;
};

View source on GitHub

Defines the box component.

Example​

import { IBox, Components, Component } from "@onlyoffice/docspace-plugin-sdk";

const box: IBox = {
  widthProp: "200px",
  paddingProp: "16px",
  displayProp: "flex",
  flexDirection: "column",
  alignItems: "center",
  borderProp: {
    color: "#333333",
    radius: "8px",
    style: "solid",
    width: "1px"
  },
  backgroundProp: "#f8f9f9"
};

const boxGroup: Component = {
  component: Components.box,
  props: box,
  contextName: "container"
};

Properties​

PropertyTypeDescription
componentboxDefines the "box" component type
propsIBoxDefines the box component properties
contextName?stringDefines the box component context name that updates the component via React context

ButtonGroup​

type ButtonGroup = {
  component: button;
  props: IButton;
  contextName?: string;
};

View source on GitHub

Defines the button component.

Example​

import { IButton, Components, Component, ButtonSize } from "@onlyoffice/docspace-plugin-sdk";

const button: IButton = {
  size: ButtonSize.normal,
  label: "Click me!",
  onClick: () => {
    console.log("Button clicked!");
  },
};

const buttonGroup: Component = {
  component: Components.button,
  props: button,
  contextName: "button",
};

Properties​

PropertyTypeDescription
componentbuttonDefines the "button" component type
propsIButtonDefines the button component properties
contextName?stringDefines the button component context name that updates the component via React context

CheckboxGroup​

type CheckboxGroup = {
  component: checkbox;
  props: ICheckbox;
  contextName?: string;
};

View source on GitHub

Defines the checkbox component.

Example​

import { ICheckbox, Components, Component, Actions } from "@onlyoffice/docspace-plugin-sdk";

const checkbox: ICheckbox = {
  isChecked: false,
  label: "Enable notifications",
  onChange: () => {
    return {
      actions: [Actions.updateProps],
      newProps: {
        isChecked: !checkbox.isChecked
      }
    };
  },
  truncate: false,
  tabIndex: 1,
  hasError: false,
  name: "notifications",
  value: "enabled",
  isDisabled: false,
  title: "Notification preferences"
};

const checkboxGroup: Component = {
  component: Components.checkbox,
  props: checkbox,
  contextName: "notificationToggle"
};

Properties​

PropertyTypeDescription
componentcheckboxDefines the "checkbox" component type
propsICheckboxDefines the checkbox component properties
contextName?stringDefines the checkbox component context name that updates the component via React context

ComboBoxGroup​

type ComboBoxGroup = {
  component: comboBox;
  props: IComboBox;
  contextName?: string;
};

View source on GitHub

Defines the combo box component.

Example​

import { IComboBox, IComboBoxItem, Components, Component, Actions } from "@onlyoffice/docspace-plugin-sdk";

const comboBox: IComboBox = {
  options: [
    { key: "light", label: "Light Theme", icon: "theme-light.svg" },
    { key: "dark", label: "Dark Theme", icon: "theme-dark.svg" },
    { key: "system", label: "System Theme", icon: "theme-auto.svg" }
  ],
  selectedOption: { key: "light", label: "Light Theme", icon: "theme-light.svg" },
  onSelect: (item) => {},
  scaled: true,
  directionX: "right",
  directionY: "bottom",
  displayType: "default",
  modernView: true
};

const comboBoxGroup: Component = {
  component: Components.comboBox,
  props: comboBox,
  contextName: "themeSelector"
};

Properties​

PropertyTypeDescription
componentcomboBoxDefines the "comboBox" component type
propsIComboBoxDefines the combo box component properties
contextName?stringDefines the combo box component context name that updates the component via React context

IFrameGroup​

type IFrameGroup = {
  component: iFrame;
  props: IFrame;
  contextName?: string;
};

View source on GitHub

Defines the iframe component.

Example​

import { IFrame, Components, Component } from "@onlyoffice/docspace-plugin-sdk";

const iframe: IFrame = {
  src: "https://example.com/embedded-content",
  width: "100%",
  height: "500px",
  name: "content-frame",
  sandbox: "allow-scripts allow-same-origin",
  id: "content-iframe",
  style: {
    border: "1px solid #eceef1",
    borderRadius: "4px",
    backgroundColor: "#ffffff"
  }
};

const iframeGroup: Component = {
  component: Components.iFrame,
  props: iframe,
  contextName: "embeddedContent"
};

Properties​

PropertyTypeDescription
componentiFrameDefines the "iFrame" component type
propsIFrameDefines the iFrame component properties
contextName?stringDefines the iFrame component context name that updates the component via React context

ImageGroup​

type ImageGroup = {
  component: img;
  props: IImage;
  contextName?: string;
};

View source on GitHub

Defines the image component.

Example​

import { IImage, Components, Component } from "@onlyoffice/docspace-plugin-sdk";

const image: IImage = {
  src: "https://example.com/plugin-banner.png",
  alt: "Plugin Banner",
  width: "100%",
  height: "auto",
  name: "plugin-banner",
  id: "banner-image",
  style: {
    borderRadius: "8px",
    boxShadow: "0 2px 8px rgba(0, 0, 0, 0.1)",
    maxWidth: "600px"
  }
};

const imageGroup: Component = {
  component: Components.img,
  props: image,
  contextName: "bannerImage"
};

Properties​

PropertyTypeDescription
componentimgDefines the "img" component type
propsIImageDefines the image component properties
contextName?stringDefines the image component context name that updates the component via React context

InputGroup​

type InputGroup = {
  component: input;
  props: IInput;
  contextName?: string;
};

View source on GitHub

Defines the input component.

Example​

import { IInput, Components, Component, Actions, InputSize } from "@onlyoffice/docspace-plugin-sdk";

const input: IInput = {
  value: "",
  onChange: (value) => {},
  placeholder: "Enter text...",
  size: InputSize.middle,
  name: "search-input",
  isAutoFocused: true,
  iconName: "search",
  iconSize: 16,
  scale: true,
  onIconClick: () => {
    console.log("Search icon clicked");
  }
};

const inputGroup: Component = {
  component: Components.input,
  props: input,
  contextName: "searchInput"
};

Properties​

PropertyTypeDescription
componentinputDefines the "input" component type
propsIInputDefines the input component properties
contextName?stringDefines the input component context name that updates the component via React context

LabelGroup​

type LabelGroup = {
  component: label;
  props: ILabel;
  contextName?: string;
};

View source on GitHub

Defines the label component.

Example​

import { ILabel, Components, Component } from "@onlyoffice/docspace-plugin-sdk";

const label: ILabel = {
  text: "Plugin Settings",
  isRequired: true,
  error: false,
  title: "Configure plugin settings",
  htmlFor: "settings-form",
  display: "block",
  truncate: true
};

const labelGroup: Component = {
  component: Components.label,
  props: label,
  contextName: "settingsLabel"
};

Properties​

PropertyTypeDescription
componentlabelDefines the "label" component type
propsILabelDefines the label component properties
contextName?stringDefines the label component context name that updates the component via React context

SkeletonGroup​

type SkeletonGroup = {
  component: skeleton;
  props: ISkeleton;
  contextName?: string;
};

View source on GitHub

Defines the skeleton component.

Example​

import { ISkeleton, Components, Component } from "@onlyoffice/docspace-plugin-sdk";

const skeleton: ISkeleton = {
  width: "100%",
  height: "200px",
  borderRadius: "8px"
};

const skeletonGroup: Component = {
  component: Components.skeleton,
  props: skeleton,
  contextName: "loadingState"
};

Properties​

PropertyTypeDescription
componentskeletonDefines the "skeleton" component type
propsISkeletonDefines the skeleton component properties
contextName?stringDefines the skeleton component context name that updates the component via React context

TextGroup​

type TextGroup = {
  component: text;
  props: IText;
  contextName?: string;
};

View source on GitHub

Defines the text component.

Example​

import { IText, Components, Component } from "@onlyoffice/docspace-plugin-sdk";

const text: IText = {
  text: "Welcome to DocSpace Plugin",
  fontSize: "18px",
  fontWeight: 500,
  lineHeight: "24px",
  color: "#333333",
  isBold: false,
  textAlign: "left",
  truncate: true,
  title: "Welcome to DocSpace Plugin"
};

const textGroup: Component = {
  component: Components.text,
  props: text,
  contextName: "welcomeText"
};

Properties​

PropertyTypeDescription
componenttextDefines the "text" component type
propsITextDefines the text component properties
contextName?stringDefines the text component context name that updates the component via React context

TextAreaGroup​

type TextAreaGroup = {
  component: textArea;
  props: ITextArea;
  contextName?: string;
};

View source on GitHub

Defines the textarea component.

Example​

import { ITextArea, Components, Component, Actions } from "@onlyoffice/docspace-plugin-sdk";

const textarea: ITextArea = {
  value: "",
  onChange: (value) => {},
  placeholder: "Enter description...",
  heightTextArea: 150,
  fontSize: 14,
  isFullHeight: true,
  heightScale: true,
  maxLength: 1000,
  hasNumeration: false
};

const textAreaGroup: Component = {
  component: Components.textArea,
  props: textarea,
  contextName: "descriptionEditor"
};

Properties​

PropertyTypeDescription
componenttextAreaDefines the "textArea" component type
propsITextAreaDefines the textarea component properties
contextName?stringDefines the textarea component context name that updates the component via React context

ToggleButtonGroup​

type ToggleButtonGroup = {
  component: toggleButton;
  props: IToggleButton;
  contextName?: string;
};

View source on GitHub

Defines the toggle button component.

Example​

import { IToggleButton, Components, Component, Actions } from "@onlyoffice/docspace-plugin-sdk";

const toggleButton: IToggleButton = {
  label: "Auto-sync",
  isChecked: true,
  onChange: () => {},
  style: {
    backgroundColor: "#f8f9f9",
    padding: "8px 12px",
    borderRadius: "4px"
  }
};

const toggleButtonGroup: Component = {
  component: Components.toggleButton,
  props: toggleButton,
  contextName: "syncToggle"
};

Properties​

PropertyTypeDescription
componenttoggleButtonDefines the "toggleButton" component type
propsIToggleButtonDefines the toggle button component properties
contextName?stringDefines the toggle button component context name that updates the component via React context

IconButtonGroup​

type IconButtonGroup = {
  component: iconButton;
  props: IIconButton;
  contextName?: string;
};

View source on GitHub

Defines the icon button component.

Example​

import { IIconButton, Components, Component, Actions } from "@onlyoffice/docspace-plugin-sdk";

const iconButton: IIconButton = {
  iconName: "settings.svg",
  size: 32,
  color: "#333333",
  hoverColor: "accent",
  onClick: () => {
    console.log("Settings clicked");
  },
  title: "Open settings",
  isDisabled: false
};

const iconButtonGroup: Component = {
  component: Components.iconButton,
  props: iconButton,
  contextName: "settingsButton"
};

Properties​

PropertyTypeDescription
componenticonButtonDefines the "iconButton" component type
propsIIconButtonDefines the icon button component properties
contextName?stringDefines the icon button component context name that updates the component via React context

LinkGroup​

type LinkGroup = {
  component: link;
  props: ILink;
  contextName?: string;
};

View source on GitHub

Defines the link component.

Example​

import { ILink, Components, Component, LinkType, LinkTarget } from "@onlyoffice/docspace-plugin-sdk";

const link: ILink = {
  href: "https://example.com",
  text: "Visit Example",
  type: LinkType.page,
  target: LinkTarget.blank,
  color: "accent",
  fontSize: "14px",
  isBold: false
};

const linkGroup: Component = {
  component: Components.link,
  props: link,
  contextName: "exampleLink"
};

Properties​

PropertyTypeDescription
componentlinkDefines the "link" component type
propsILinkDefines the link component properties
contextName?stringDefines the link component context name that updates the component via React context