Components

The @akinon/app-client library primarily focuses on providing context and hooks for your application. However, it does include one important component that serves as the foundation for using the library in your React applications.

AppClientProvider

The AppClientProvider is a crucial component that sets up the context for your application, enabling the use of app client functionalities throughout your component tree.

Props

Usage

import React from 'react';
import ReactDOM from 'react-dom';
import { AppClientProvider } from '@akinon/app-client';
import App from './App';
 
const config = {
  isDev: process.env.NODE_ENV === 'development'
  // Other configuration options...
};
 
ReactDOM.render(
  <AppClientProvider config={config}>
    <App />
  </AppClientProvider>,
  document.getElementById('root')
);

Functionality

The AppClientProvider component:

1. Sets up communication with the app shell using the Framebus library.
2. Manages the application state, including data, parameters, and loading status.
3. Provides methods for navigation, action invocation, and UI interactions (modals, toasts, etc.).
4. Handles initialization and cleanup of event listeners.

By wrapping your application with AppClientProvider, you ensure that all child components have access to the app client context and its associated functionalities through the useAppClient hook.

Example with TypeScript

import React from 'react';
import ReactDOM from 'react-dom';
import {
  AppClientProvider,
  type FullpageApplicationConfig
} from '@akinon/app-client';
import App from './App';
 
const config: FullpageApplicationConfig = {
  isDev: process.env.NODE_ENV === 'development',
  menu: [
    // Define your menu structure here
  ],
  navigation: {
    navigate: ({ path }) => {
      // Implement your navigation logic here
    }
  }
};
 
ReactDOM.render(
  <AppClientProvider config={config}>
    <App />
  </AppClientProvider>,
  document.getElementById('root')
);

By properly configuring and using the AppClientProvider, you set up your application to take full advantage of the features provided by the @akinon/app-client library.

MultiAppProvider

MultiAppProvider enables the development of multiple client applications over a single URL.

Props