Event Handling
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.
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 |
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>
)
}
Last modified 3mo ago