@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}
  handleUIKitAction={handleUIKitAction}
>
  <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 {
  // see Action Handlers section for more details
  handleWebAction,
  handleCustomAction,
  handleUIKitAction,
} = 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

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

handleWebAction?(event: React.SyntheticEvent, action: Action);
handleCustomAction?(event: React.SyntheticEvent, action: Action);
handleUIKitAction?(event: React.SyntheticEvent, action: Action);

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

0.0.21 (2025-11-24)

Note: Version bump only for package @sendbird/react-uikit-message-template-view

0.0.20 (2025-11-10)

Note: Version bump only for package @sendbird/react-uikit-message-template-view

0.0.19 (2025-10-22)

Features

• add ESM/CJS dual module support with ESM as default (213a8b1)

0.0.18 (2025-10-02)

Note: Version bump only for package @sendbird/react-uikit-message-template-view

0.0.17 (2025-09-23)

Note: Version bump only for package @sendbird/react-uikit-message-template-view

0.0.16 (2025-08-27)

Note: Version bump only for package @sendbird/react-uikit-message-template-view

0.0.15 (2025-08-20)

Note: Version bump only for package @sendbird/react-uikit-message-template-view

0.0.14 (2025-07-29)

Note: Version bump only for package @sendbird/react-uikit-message-template-view

0.0.13 (2025-07-23)

Note: Version bump only for package @sendbird/react-uikit-message-template-view

0.0.12 (2025-07-22)

Bug Fixes

• duplicate padding in cascade view (871631c)

Features

• support internal action handler and remove unncessary interfaces (c4fe2a3)

0.0.11 (2025-07-22)

Features

• add cascadeView (1de6abf)

0.0.10 (2025-06-20)

Note: Version bump only for package @sendbird/react-uikit-message-template-view

0.0.9 (2025-06-16)

Note: Version bump only for package @sendbird/react-uikit-message-template-view

0.0.8 (2025-06-10)

Bug Fixes

• fixed text align direction to support rtl (51d2df3)

0.0.7 (2025-04-28)

Features

• add exports to uikit-tools (9529416)
• support carousel rtl dir (54e12f8)

0.0.6 (2025-04-25)

Bug Fixes

• handle default width in shouldSetMaxChildWidth (54b87d8)

0.0.5 (2025-03-12)

Bug Fixes

• img set draggable to false (b9c4c7d)

0.0.4 (2025-03-10)

Bug Fixes

• distinguish click and scroll handling in carousel (261d99b)
• prevent click issues caused by border style (2463456)
• suppress image size console message (2e13533)

0.0.3 (2024-10-08)

Features

• added highlight interface to MessageProvider (9b9abd0)

0.0.2 (2024-09-20)

Bug Fixes

• add onMouseLeave handler (d4fe5ce)
• apply view style, add fixme comments (84eeba5)
• apply word break to text style (7ab7d18)
• background image should be stretched (7e3ad6c)
• fixed carousel interface and clean up interface (5f6343f)
• parse maxTextLines to number, set fit-content if text width is wrap (53ddcda)
• remove style (95825f5)
• spacing default to 10 (2437954)
• textButton styles (415c567)
• use flow properties (8c841c2)

Features

• support number and color transforms by default (f5342f6)

0.0.1-alpha.79 (2024-07-30)

Note: Version bump only for package @sendbird/react-uikit-message-template-view

0.0.1-alpha.78 (2024-07-26)

Note: Version bump only for package @sendbird/react-uikit-message-template-view

0.0.1-alpha.77 (2024-06-21)

Note: Version bump only for package @sendbird/react-uikit-message-template-view

0.0.1-alpha.76 (2024-06-11)

Note: Version bump only for package @sendbird/react-uikit-message-template-view

0.0.1-alpha.75 (2024-06-05)

Bug Fixes

• add size and position to background image (ce2380d)
• apply padding and image background mode (96fc148)

0.0.1-alpha.74 (2024-05-30)

Note: Version bump only for package @sendbird/react-uikit-message-template-view

0.0.1-alpha.73 (2024-04-22)

Features

• added template version validation (#119) (92a1750)

0.0.1-alpha.72 (2024-04-05)

Features

• added template version validation (#119) (92a1750)

0.0.1-alpha.71 (2024-04-04)

Features

• added template version validation (#119) (92a1750)

0.0.1-alpha.70 (2024-04-04)

Features

• added template version validation (#119) (92a1750)

0.0.1-alpha.69 (2024-03-27)

Features

• added template version validation (#119) (92a1750)

0.0.1-alpha.68 (2024-03-26)

Note: Version bump only for package @sendbird/react-uikit-message-template-view

0.0.1-alpha.67 (2024-03-26)

Features

• AC-1230: add composite template support (CarouselView) (#115) (816ec79)

0.0.1-alpha.66 (2024-03-22)

Bug Fixes

• horizontal margin+fill parent width in column box (f9b3a03)

0.0.1-alpha.65 (2024-02-28)

Note: Version bump only for package @sendbird/react-uikit-message-template-view

0.0.1-alpha.64 (2024-02-26)

Note: Version bump only for package @sendbird/react-uikit-message-template-view

0.0.1-alpha.63 (2024-02-22)

Bug Fixes

• should apply padding to textButton (eb2fd94)

0.0.1-alpha.62 (2024-02-16)

Note: Version bump only for package @sendbird/react-uikit-message-template-view

0.0.1-alpha.61 (2024-02-01)

Note: Version bump only for package @sendbird/react-uikit-message-template-view

0.0.1-alpha.60 (2024-01-30)

Note: Version bump only for package @sendbird/react-uikit-message-template-view

0.0.1-alpha.59 (2024-01-30)

Note: Version bump only for package @sendbird/react-uikit-message-template-view

0.0.1-alpha.58 (2024-01-26)

Note: Version bump only for package @sendbird/react-uikit-message-template-view

0.0.1-alpha.57 (2024-01-16)

Note: Version bump only for package @sendbird/react-uikit-message-template-view

0.0.1-alpha.56 (2024-01-12)

Note: Version bump only for package @sendbird/react-uikit-message-template-view

0.0.1-alpha.55 (2024-01-12)

Note: Version bump only for package @sendbird/react-uikit-message-template-view

0.0.1-alpha.53 (2024-01-12)

Note: Version bump only for package @sendbird/react-uikit-message-template-view

0.0.1-alpha.52 (2024-01-12)

Note: Version bump only for package @sendbird/react-uikit-message-template-view

0.0.1-alpha.51 (2024-01-09)

Note: Version bump only for package @sendbird/react-uikit-message-template-view

0.0.1-alpha.50 (2024-01-08)

Note: Version bump only for package @sendbird/react-uikit-message-template-view

0.0.1-alpha.49 (2024-01-04)

Note: Version bump only for package @sendbird/react-uikit-message-template-view

0.0.1-alpha.48 (2023-12-14)

Note: Version bump only for package @sendbird/react-uikit-message-template-view

0.0.1-alpha.47 (2023-12-13)

Note: Version bump only for package @sendbird/react-uikit-message-template-view

0.0.1-alpha.46 (2023-12-11)

Note: Version bump only for package @sendbird/react-uikit-message-template-view

0.0.1-alpha.45 (2023-12-07)

Note: Version bump only for package @sendbird/react-uikit-message-template-view

0.0.1-alpha.44 (2023-11-29)

Note: Version bump only for package @sendbird/react-uikit-message-template-view

0.0.1-alpha.43 (2023-11-15)

Note: Version bump only for package @sendbird/react-uikit-message-template-view

0.0.1-alpha.42 (2023-11-14)

Note: Version bump only for package @sendbird/react-uikit-message-template-view

0.0.1-alpha.41 (2023-11-14)

Note: Version bump only for package @sendbird/react-uikit-message-template-view

0.0.1-alpha.40 (2023-11-14)

Note: Version bump only for package @sendbird/react-uikit-message-template-view

0.0.1-alpha.39 (2023-06-29)

Note: Version bump only for package @sendbird/react-uikit-message-template-view

0.0.1-alpha.38 (2023-06-12)

Bug Fixes

• added files field to the package.json (#51) (7329268)

0.0.1-alpha.37 (2023-06-09)

Note: Version bump only for package @sendbird/react-uikit-message-template-view

0.0.1-alpha.36 (2023-06-08)

Note: Version bump only for package @sendbird/react-uikit-message-template-view

0.0.1-alpha.34 (2023-06-05)

Note: Version bump only for package @sendbird/react-uikit-message-template-view

0.0.1-alpha.33 (2023-05-17)

Bug Fixes

• NOTI-878: fix image metaData not being reflected after it is updated (#44) (85d7326)

0.0.1-alpha.32 (2023-05-16)

Bug Fixes

• NOTI-852: Change image tag policy (#42) (8714197)

0.0.1-alpha.31 (2023-05-09)

Bug Fixes

• change to cover scale (ea372d1)

0.0.1-alpha.30 (2023-05-09)

Bug Fixes

• NOTI-763: issues with template changes not reflecting correctly (#37) (16cf5b2)

0.0.1-alpha.29 (2023-05-08)

Bug Fixes

• fixed wrong yarn command in publish workflow (086d846)

0.0.1-alpha.28 (2023-04-25)

Note: Version bump only for package @sendbird/react-uikit-message-template-view

0.0.1-alpha.27 (2023-04-25)

Bug Fixes

• calculate element size including its padding (#32) (da713ee), closes #29

0.0.1-alpha.27 (2023-04-25)

Note: Version bump only for package @sendbird/react-uikit-message-template-view

0.0.1-alpha.27 (2023-04-25)

Note: Version bump only for package @sendbird/react-uikit-message-template-view

0.0.1-alpha.26 (2023-04-25)

Note: Version bump only for package @sendbird/react-uikit-message-template-view

0.0.1-alpha.26 (2023-04-25)

Bug Fixes

• NOTI-680: Reduce padding value to fit the width and height size (#26) (55db358)
• NOTI-709: exception handling for two wrapped text components (#29) (f861c5a)
• NOTI-710: Fix overflowed wrap type text to be wrapped (#24) (42ef041)

Features

• NOTI-682: Hide text that overflows into padding-area(#25) (0df42fd)

0.0.1-alpha.25 (2023-04-17)

Note: Version bump only for package @sendbird/react-uikit-message-template-view

0.0.1-alpha.25 (2023-04-17)

Features

• NOTI-681: apply radius on pseudo element (#23) (afe8421)

0.0.1-alpha.24 (2023-04-17)

Note: Version bump only for package @sendbird/react-uikit-message-template-view

0.0.1-alpha.24 (2023-04-17)

Bug Fixes

• QM-2692: text wrap issue (#21) (b5c1c72)

Features

• NOTI-681: Change border option to foreground (#22) (a15fb98)

0.0.1-alpha.23 (2023-03-23)

Bug Fixes

• NOTI-260: remove fixed height from textButton (#20) (c6cbc10)

0.0.1-alpha.22 (2023-03-14)

Bug Fixes

• NOTI-406: fix text alignment when maxTextLines is set (#18) (fbf1a5d)

0.0.1-alpha.21 (2023-03-13)

Bug Fixes

• UIKIT-3369: react image style (#16) (befc569)

0.0.1-alpha.20 (2023-03-13)

Bug Fixes

• UIKIT-3348: fixed to correct size is applied to the React component (#13) (72a68f5)

0.0.1-alpha.19 (2023-03-10)

Bug Fixes

• NOTI-363: fix viewStyle.backgroundImageUrl for React (#12) (9223c05)

0.0.1-alpha.18 (2023-03-07)

Note: Version bump only for package @sendbird/react-uikit-message-template-view

0.0.1-alpha.17 (2023-03-07)

Note: Version bump only for package @sendbird/react-uikit-message-template-view

0.0.1-alpha.16 (2023-02-22)

Note: Version bump only for package @sendbird/react-uikit-message-template-view

0.0.1-alpha.15 (2023-02-22)

Note: Version bump only for package @sendbird/react-uikit-message-template-view

0.0.1-alpha.14 (2023-02-22)

Note: Version bump only for package @sendbird/react-uikit-message-template-view

0.0.1-alpha.13 (2023-02-22)

Note: Version bump only for package @sendbird/react-uikit-message-template-view