Skip to main content

Editor Widget

First steps​

To start with the widget, add the necessary packages to the project.

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

or

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

Import the widget into the project.

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>
  );
}

The Willow component acts as a default theme wrapper that adds necessary styles for all SVAR widgets. The Editor component can function without it, but it will lack styles, requiring manual style addition. It is recommended to include the Willow tag at the top level of the application.

Full init code​

To see the widget in action, add some items to the widget.

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>
  );
}
note

To ensure correct initialization, it's recommended to apply a theme at the top level of your application. If you use the Editor component standalone, do not forget to wrap it into a theme (Willow is applied in the example above).

Related articles: