open-index/open-npm huggingface dataset:
npm package: @sendbird/react-uikit-message-template-view
Description: 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, customer
Latest version: 0.1.2

# @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);
```
npm package: @sendbird/uikit-message-template
Description: This package provides utilities to parse `Message Template` strings.
Latest version: 0.1.2

# 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>
    );
  },
});
```
npm package: @sendbird/uikit-tools
Description: UIKit tools package
Latest version: 0.1.2

# uikit-tools

UIKit tools package

This package is created and published for the dependency of UIKit for React and React-Native.
Therefore, we do not guarantee that this package will work in other environments.
If you use this package outside of UIKit and encounter any issues, you will need to handle them on your own.

## Usage

```
npm i @sendbird/uikit-tools
```