Skip to Content
UI ProtocolAppClientIntroduction

Introduction to @akinon/app-client

The @akinon/app-client library is a crucial part of the Akinon UI Protocol, designed to facilitate the creation of micro-frontend applications that seamlessly integrate with the main application shell. This library provides a React context and hooks for enabling inter-app communication, navigation, and other essential functionalities.

Key Features

  • Seamless integration with the main application shell
  • Easy-to-use React hooks for accessing client functionalities
  • Support for navigation between micro-frontend applications
  • Ability to invoke custom actions defined in the app shell
  • Helper functions for displaying modals, toasts, and more
  • TypeScript support for improved developer experience

Installation

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

pnpm install @akinon/app-client

Basic Usage

Here’s a quick example of how to use the @akinon/app-client library in your React application:

import React from 'react';
import ReactDOM from 'react-dom';
import { AppClientProvider, useAppClient } from '@akinon/app-client';
 
const MyComponent = () => {
  const { navigate } = useAppClient();
 
  return (
    <button onClick={() => navigate({ path: '/some-path' })}>Navigate</button>
  );
};
 
const App = () => (
  <AppClientProvider config={{ isDev: process.env.NODE_ENV === 'development' }}>
    <MyComponent />
  </AppClientProvider>
);
 
ReactDOM.render(<App />, document.getElementById('root'));

This example demonstrates how to wrap your application with the AppClientProvider and use the useAppClient hook to access navigation functionality.

In the following sections, we’ll dive deeper into the API, available hooks, and advanced usage scenarios of the @akinon/app-client library.

API ReferenceAPI Reference