@sendbird/react-uikit-message-template-view v0.0.1-alpha.73

@sendbird/react-uikit-message-template-view

This package renders UI for react applications using Sendbird Message Template. It is used in Notification Channels in Sendbird UIKit for React. It is a part of an initiative in Sendbird to implement Notfication Channels. Using Message Templates, customers can define a template for a notification message and use it to send notifications to targetted users which should be rendered in the same way on all the client platforms & devices

Read more: https://sendbird.atlassian.net/wiki/spaces/UK/pages/1929610099/UIKit+Message+template

Usage

npm i @sendbird/react-uikit-message-template-view

import {
  MessageTemplate,
  MessageProvider,
  useMessageContext,
} from '@sendbird/react-uikit-message-template-view';

Usage

<MessageProvider
  message={message}
  handleWebAction={handleWebAction}
  handleCustomAction={handleCustomAction}
  handlePredefinedAction={handlePredefinedAction}
>
  <MessageTemplate templateItems={messageTemplate?.body?.items} />
</MessageProvider>

useMessageContext is used inside MessageTemplate to fetch the message and the handlers. You need useMessageContext only when you are creating custom MessageTemplates

const {
  message,
  // see Action Handlers section for more details
  handleWebAction,
  handleCustomAction,
  handlePredefinedAction,
} = useMessageContext() as MessageContextInterface;

Action Handlers

handleWebAction is used to handle web actions. It takes a url as a parameter and opens it in a new tab

handleCustomAction is used to handle custom actions. It takes a custom action as a parameter and executes it

handlePredefinedAction is used to handle predefined actions. It takes a predefined action as a parameter and executes it

handleWebAction?(event: React.SyntheticEvent, action: Action, message: BaseMessage);
handleCustomAction?(event: React.SyntheticEvent, action: Action, message: BaseMessage);
handlePredefinedAction?(event: React.SyntheticEvent, action: Action, message: BaseMessage);