Event Handling

Custom Event Handler

There are many pages and actions on AmityUIKit. Pages can be nested inside others and it would be hard for overriding events on the nested pages. In order to solve this problem, we provide EkoEventHandler which is a behavior controller for actions that happen in UIKit.

Supported Events

Event	Parameter	Condition
onChangePage	pageName	onChangePage is called right before UIKit changes the page type which should be rendered. If handler is passed, UIKit relies on it instead of its internal implementation
onClickCategory	categoryId	Category display name is clicked
onClickCommunity	communityId	Community display name is clicked
onClickUser	userId	User avatar or user display name is clicked
onCommunityCreated	communityId	New community is created
onEditCommunity	communityId	Edit community button is clicked
onEditUser	userId	Edit user button is clicked

Usage

To pass handlers into UIKit you need to set ‘actionHandlers’ prop for AmityUiKitProvider. All handlers are optional. If any is not passed, UIKit will use its own internal implementation.

import { AmityUiKitProvider } from '@amityco/ui-kit';

function MyApp() {
  return (
    <AmityUiKitProvider
      actionHandlers={{
        onChangePage: customOnChangePageHandler,
        onClickCategory: customOnClickCategoryHandler,
        onClickCommunity: customOnClickCommunityHandler,
        onClickUser: customOnClickUserHandler,
        onCommunityCreated: customOnCommunityCreatedHandler,
        onEditCommunity: customOnEditCommunityHandler,
        onEditUser: customOnEditUserHandler,
      }}
    >
       ...
    </AmityUiKitProvider>
  );
}

You can access any action handler using the useAmityNavigationhook.

import { useAmityNavigation } from '@amityco/ui-kit';

function MyComponent() {
  const { onClickUser } = useAmityNavigation();

  return (
    <button onClick={() => onClickUser('myUser')}>
       Show My User page
    </button>
  )
}