Skip to main content

Getting started

If you are here, it means only one thing - you are ready to start building a new app based on the SVAR Core components and React. So let’s dive in and get you up and running right away.

Step 1. Install library dependencies​

SVAR Core library of controls is an open-source library distributed under the MIT license. It includes separate packages for Form controls, Menu, Toolbar, Comments, and Tasklist. You can install the necessary package via a package manager. For example, you can use npm and run the following commands:

  • for Form controls (the core library):
# form controls
npm install @svar-ui/react-core

# menu
npm install @svar-ui/react-menu

# toolbar
npm install @svar-ui/react-toolbar

# comments
npm install @svar-ui/react-comments

# tasklist
npm install @svar-ui/react-tasklist

Step 2. Import components​

To use the installed package in your application, import the corresponding components. Here's an example importing the Button control from the @svar-ui/react-core package:

import { Button } from "@svar-ui/react-core";

Step 3. Initialize components​

Use the corresponding JSX element to create the chosen control in your React component:

import { Button } from "@svar-ui/react-core";

export default function App() {
  return <Button>Click Me</Button>;
}

Follow the related Controls sections for more information on initialization and configuration.

Step 4. Apply a skin​

To ensure correct initialization and a visually pleasing appearance of the control, it's recommended to apply a skin at the top level of your application. The SVAR React library provides skins such as Willow and WillowDark. Each skin is available in the package you have already installed.

To apply a skin to all the components in your application, import the desired skin component from the same package and wrap your application content with it. Here's an example:

import { Button, Willow } from "@svar-ui/react-core";
import "@svar-ui/react-core/style.css";

export default function App() {
  return (
    <Willow>
      {/* Place your entire application code here */}
      <Button>Click Me</Button>
    </Willow>
  );
}

if the theme tag causes problem with rendering you can write the same in a different way, the wx-theme-{theme name} class will apply skin to the inner content

export default function App() {
  return (
    <>
      <Willow />
      <div className="wx-theme-willow">
        {/* Place your entire application code here */}
        <Button>Click Me</Button>
      </div>
    </>
  );
}

Learn more about skins in the Styling guide.

Step 5. Choose it yourself​

The last step depends on what you want to do next. Here are the options:

  • Dive into the specificity of each control at the Widgets section
  • Explore the API Reference to get the full picture of the library functionality
  • Check the possibilities of localization, styling and user-app interaction in the Guides
  • Surf the Samples to check all the available features