Event handling

Search…
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.
1
import { AmityUiKitProvider } from '@amityco/ui-kit';
2
​
3
function MyApp() {
4
  return (
5
    <AmityUiKitProvider
6
      actionHandlers={{
7
        onChangePage: customOnChangePageHandler,
8
        onClickCategory: customOnClickCategoryHandler,
9
        onClickCommunity: customOnClickCommunityHandler,
10
        onClickUser: customOnClickUserHandler,
11
        onCommunityCreated: customOnCommunityCreatedHandler,
12
        onEditCommunity: customOnEditCommunityHandler,
13
        onEditUser: customOnEditUserHandler,
14
      }}
15
    >
16
       ...
17
    </AmityUiKitProvider>
18
  );
19
}
Copied!
You can access any action handler using the useAmityNavigationhook.
1
import { useAmityNavigation } from '@amityco/ui-kit';
2
​
3
function MyComponent() {
4
  const { onClickUser } = useAmityNavigation();
5
​
6
  return (
7
    <button onClick={() => onClickUser('myUser')}>
8
       Show My User page
9
    </button>
10
  )
11
}
Copied!
Chat details
Example
Last modified 27d ago
Copy link
Contents
Custom event handler
Supported events
Usage