Initialization · ActiveUI

If you use our activeui-4.3.22.zip artifact, ActiveUI SDK will already be set up for you, although you may need to change the options passed to createActiveUI.

You can create an instance of ActiveUI by calling createActiveUI:

import {createActiveUI} from '@activeviam/activeui-sdk';

const activeUI = createActiveUI();

Options

Passing options to createActiveUI allows you to:

register your custom plugin implementations.
change the default value of a setting.
change how translation files are fetched.

To create an instance of the ActiveUI with custom options:

const activeUI = createActiveUI({
  defaultSettings: {
    'global.locale': 'fr-FR',
    'global.logger': 'verbose'
  },
  ...
});

Rendering

Before rendering components from @activeviam/activeui-sdk, you are required to provide an ActiveUI instance and Ant Design styles

Providing an ActiveUI instance

You must wrap your root component in <ActiveUIProvider />:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import {createActiveUI, ActiveUIProvider} from '@activeviam/activeui-sdk';

const activeUI = createActiveUI({
  // your options
});

// NOTE: To use JSX and ES6 imports you will need to setup Babel.
// This is already done for you in the ActiveUI Project artifact.
ReactDOM.render(
  <ActiveUIProvider activeUI={activeUI}>
    <App />
  </ActiveUIProvider>,
  document.getElementById('root'),
);

<ActiveUIProvider /> will allow components rendered under <App /> to get access to activeUI without needing to import it. See the Project Architecture page for more information on this pattern.

Providing Ant Design styles

You must provide Ant Design styles by adding the ant-root class name to the <body /> element of your Web page. See Custom UI components with Ant Design for more information.

Creating a Component

To access activeUI in a component you should use useActiveUI.

// MyComponent.js
import React from 'react';
import {useActiveUI} from '@activeviam/activeui-sdk';

export function MyComponent() {
  const activeUI = useActiveUI();
  return <h1>`ActiveUI SDK ${activeUI.about.packageVersion}`</h1>;
}

You can now import <MyComponent /> and render it within <App />. It will display your current version of ActiveUI SDK.

We suggest being careful when using an instance of ActiveUI in hooks that take dependencies. Some properties of ActiveUI are not referentially equal when you access them multiple times. It is often better to pass activeUI as the dependency.

e.g. Passing activeUI as a dependency instead of activeUI.security will be less likely to lead to issues.