Project Architecture

It is important to architect your project carefully to keep it maintenable and easily testable.

We strongly advise against exporting an instance of the ActiveUI SDK API and importing it directly. This is a singleton pattern and it will prevent you from writing tests in isolation.

Instead you should use the <ActiveUIProvider /> and <ActiveUIConsumer /> components:

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

const activeUI = createActiveUI();

ReactDOM.render(
  <ActiveUIProvider activeUI={activeUI}>
    <App />
  </ActiveUIProvider>,
  document.getElementById('root'),
);

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

export const App = () => (
  <ActiveUIConsumer>
    {activeUI => <span>{activeUI.settings.get('global.locale')}</span>}
  </ActiveUIConsumer>
);

By using <ActiveUIConsumer /> instead of importing activeUI directly our component is not tied to a specific instance of ActiveUI.

To further decouple your components you could separate App into App and AppContainer, where AppContainer is concerned with getting props from activeUI.

// App.js
import React from 'react';

export const App = ({locale}) => <span>{locale}</span>;

// AppContainer.js
import React from 'react';
import {App} from './App';

export const AppContainer = () => (
  <ActiveUIConsumer>
    {activeUI => <App locale={activeUI.settings.get('global.locale')} />}
  </ActiveUIConsumer>
);

This way <App /> can be tested on its own without having to create and provide an instance of ActiveUI.