Skip to Content
UI ProtocolAppClientHooks

Hooks

The @akinon/app-client library provides a set of React hooks that allow you to easily access and utilize the functionality provided by the app client context.

useAppClient

The useAppClient hook is the primary way to access the app client context and its associated functions within your components.

Usage

import { useAppClient } from '@akinon/app-client';
 
const MyComponent = () => {
  const {
    data,
    params,
    isLoading,
    invokeAction,
    navigate,
    showModalDialog,
    showConfirmationDialog,
    showToast,
    showErrorMessage,
    showRichModal
  } = useAppClient();
 
  // Use the context values and functions in your component
};

Return Value

The useAppClient hook returns an object with the following properties and methods:

NameTypeDescription
dataApplicationData | undefinedShared application data
modalContextunknownRich modal context data
paramsApplicationParams | undefinedAdditional parameters passed to the application
isLoadingbooleanIndicates whether the application data is currently loading
invokeAction<T = any>(actionKey: string, ...args: any[]) => Promise<T>Method to invoke a custom action defined in the app shell
navigate(payload: ShellNavigationPayload) => voidMethod to navigate to a different route
showModalDialog(title: string, content: string) => voidDisplay a modal dialog
showConfirmationDialog(title: string, content: string) => booleanDisplay a confirmation dialog
showToast(content: string, type: 'success' | 'warning' | 'error' | 'loading' | 'destroy') => voidDisplay a toast notification
showErrorMessage(title: string, content: string) => voidDisplay an error message dialog
showRichModal(path: string, context?: unknown) => voidDisplay a rich content modal

Example

import React from 'react';
import { useAppClient } from '@akinon/app-client';
 
const NavigationButton = () => {
  const { navigate } = useAppClient();
 
  return (
    <button onClick={() => navigate({ path: '/dashboard' })}>
      Go to Dashboard
    </button>
  );
};
 
const ActionButton = () => {
  const { invokeAction } = useAppClient();
 
  const handleClick = async () => {
    try {
      const result = await invokeAction('customAction', 'arg1', 'arg2');
      console.log('Action result:', result);
    } catch (error) {
      console.error('Action failed:', error);
    }
  };
 
  return <button onClick={handleClick}>Invoke Custom Action</button>;
};

By using the useAppClient hook, you can easily access and utilize the various functionalities provided by the app client context throughout your application.

ConfigurationUI