JSPM

  • Created
  • Published
  • Downloads 50576
  • Score
    100M100P100Q170946F

Package Exports

  • @sendbird/react-uikit-message-template-view
  • @sendbird/react-uikit-message-template-view/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@sendbird/react-uikit-message-template-view) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@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);