Project Architecture

It is important to take care with the architecture of your project, to keep it maintainable and easily testable.

We strongly advise against exporting an instance of ActiveUI 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 /> component, and the useActiveUI hook:

// 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 {useActiveUI} from '@activeviam/activeui-sdk';

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

By using useActiveUI 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 function App(props) {
  return <span>{props.locale}</span>;
}

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

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

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

There are other ways of getting access to ActiveUI from React context if you need them:

← InitializationAdding KaTex fonts →