Initialization

If you use our activeui-4.2.12.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 do things such as:

• Registering your custom plugin implementations.
• Changing the default value of a setting.
• Changing 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 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.

Creating a Component

To access activeUI in a component you should use <ActiveUIConsumer />.

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

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

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