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!
Last modified 27d ago