Event Handling

Custom Event Handler

There are many pages and actions on Social Plus UIKit. Pages can be nested inside others and it would be hard to override 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 the ‘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>
  )
}

Last updated