@akinon/app-client
v0.14.0
Published
Akinon AppClient library. This library is used to create a new plugin or an application which will reside in Akinon's applications.
Downloads
123
Readme
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.