@sendbird/uikit-message-template

message-template

This package provides utilities to parse Message Template strings.

@sendbird/uikit-message-template

Message Template is born as 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/uikit-message-template

import {
  createParser,
  createRenderer,
  createMessageTemplate,
} from ' @sendbird/uikit-message-template';

createParser

const parser = createParser({
  mapBoxProps(props) {
    const styles = generateStylesFromProps(props);
    return styles;
  },
  mapTextProps(props) { .. },
  mapImageProps(props) { .. },
  mapTextButtonProps(props) { .. },
  mapImageButtonProps(props) { .. },
});

createRenderer

export const renderer = createRenderer({
  views: {
    box(props) {
      // render your component for given type
      return (<div>{props.text}</div>);
    },
    text(props) { ... },
    image(props) { ... },
    textButton(props) { ... },
    imageButton(props) { ... },
  },
});

createMessageTemplate

const { MessageTemplate } = createMessageTemplate({
  renderer,
  parser,
  Container: ({ children }) => {
    return (
      <div className="sb-message-template__parent">
        {children}
      </div>
    );
  },
});