1 of 2

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

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>
  )
}

Example

When a user clicks on the user profile avatar at the post creator area, UIKit will open User profile page.

However, you can intercept the event and define your own logic following the example below.

Usage

Let’s say you want to override the default logic and open your own modal showing the user profile instead of navigating to the user profile page.

function openUserProfileModal(userId) {
  ...
}

function MyApp() {
  return (
    <AmityUiKitProvider
      actionHandlers={{
        onClickUser: userId => openUserProfileModal(userId),
      }}
    >
      ...
    </AmityUiKitProvider>
  );
}

Event Handling

Custom Event Handler

Supported Events

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>
  )
}

Example

When a user clicks on the user profile avatar at the post creator area, UIKit will open User profile page.

However, you can intercept the event and define your own logic following the example below.

Usage

Let’s say you want to override the default logic and open your own modal showing the user profile instead of navigating to the user profile page.

function openUserProfileModal(userId) {
  ...
}

function MyApp() {
  return (
    <AmityUiKitProvider
      actionHandlers={{
        onClickUser: userId => openUserProfileModal(userId),
      }}
    >
      ...
    </AmityUiKitProvider>
  );
}