Akinon App Client Library

The app-client library provides a React context and hooks for integrating micro-frontend applications with the main application shell, enabling actions like navigation, displaying modals, and other inter-app communications.

Installation

To add the app-client library to your project, run:

pnpm install @akinon/app-client

Usage

First, wrap your micro-frontend's root component with the AppClientProvider:

import React from 'react';
import ReactDOM from 'react-dom';
import { AppClientProvider } from '@akinon/app-client';
import App from './App';

ReactDOM.render(
  <AppClientProvider config={{ isDev: true }}>
    <App />
  </AppClientProvider>,
  document.getElementById('root')
);

Then, use the useAppClient hook within your components to access client functionalities:

import React from 'react';
import { useAppClient } from '@akinon/app-client';

const MyComponent = () => {
  const { navigate } = useAppClient();

  return <button onClick={() => navigate('/path')}>Go somewhere</button>;
};

API

AppClientProvider

Props:

config: Configuration for the client application, including isDev and forceRedirect.

`useAppClient` Hook

Provides access to:

navigate(path: string): Function to navigate to a different route.
invokeAction(actionKey: string, ...args: any[]): Invoke a custom action defined in the app shell.
Helper functions for showing modals, toasts, and more.
data: Data shared by host applications.

Configuration

The AppClientProvider accepts the following configuration options:

isDev: Enables development mode.
forceRedirect: Forces the application to load in an iframe if not already.

For more information on configuration and usage, please refer to the detailed documentation.