Перейти к основному содержимому

Начало работы

На этой странице описано, как начать работу с компонентом SVAR React Editor в приложении на React.

Шаг 1. Установка пакетов​

Установите пакет редактора и основную библиотеку UI, обеспечивающую тему:

npm install @svar-ui/react-core
npm install @svar-ui/react-editor

Или с помощью yarn:

yarn add @svar-ui/react-core
yarn add @svar-ui/react-editor

Шаг 2. Инициализация редактора​

Импортируйте компонент Editor и оберните его в тему Willow для применения стилей по умолчанию:

import { Willow } from '@svar-ui/react-core';
import { Editor } from '@svar-ui/react-editor';
import "@svar-ui/react-editor/all.css";

export default function App() {
  return (
    <Willow>
      <Editor />
    </Willow>
  );
}

Willow добавляет необходимые стили для всех виджетов SVAR. Размещайте его на верхнем уровне приложения. Без него у Editor не будет стилей и их потребуется добавить вручную.

Шаг 3. Добавление полей формы​

Чтобы отобразить реальную форму, передайте в редактор массив items (определения полей) и объект values (начальные данные):

import { Willow } from '@svar-ui/react-core';
import { Editor } from '@svar-ui/react-editor';
import "@svar-ui/react-editor/all.css";

const items = [
  { comp: "text", key: "name", label: "Name" },
  { comp: "text", key: "descr", label: "Description" },
  { comp: "text", key: "role", label: "Role" }
];

const values = {
  name: "John Doe",
  descr: "Lorem ipsum dolor sit amet",
  role: "admin"
};

export default function App() {
  return (
    <Willow>
      <Editor items={items} values={values} />
    </Willow>
  );
}

Каждый элемент массива items определяет поле: comp задаёт тип элемента управления, key связывает его с соответствующим значением в объекте values, а label задаёт отображаемый текст.

примечание

Для корректной инициализации рекомендуется применять тему на верхнем уровне приложения. Если вы используете компонент Editor отдельно, не забудьте обернуть его в тему (в примере выше применяется тема Willow).

Что дальше​

Теперь у вас есть рабочий редактор с полями формы. Отсюда вы можете настроить режимы отображения, добавить валидацию, изменить панель инструментов или переключиться на тёмную тему.