react-slack-renderer

0.0.15 • Public • Published

React-slack-renderer

npm version

Design Principles

  • Support for Slack's new Blocks API first
    • Attachments considered legacy/obsolete
  • Components are stateless. Follow a flux model. Props only, and map events to actions.
  • Each Component encapsulates a parent-agnostic view of a Slack message entity (eg. a layout block). It's responsible for rendering its own JSON shape.
    • render should always return a JSON entity that is a subtree of a Slack message.

Example

const message = (
  <Message>
    <SectionBlock accessory={<ButtonElement actionId="doAThing">Go!</ButtonElement>}>
      <Text type="plaintext" emoji={true}>section text :sadkeanu:</Text>
    </SectionBlock>
    <DividerBlock />
    <SectionBlock blockId="section1">
      <Text type="mrkdwn">
        section ```code```
      </Text>
    </SectionBlock>
  </Message>
);
 
const json = SlackRenderer.render(message);
{
  "response_type": "ephemeral",
  "blocks": [
    {
      "type": "section",
      "text": {
        "text": {
          "type": "plaintext",
          "emoji": true,
          "verbatim": false,
          "text": "section text :sadkeanu:"
        }
      }
    },
    { "type": "divider" },
    {
      "type": "section",
      "text": {
        "text": {
          "type": "mrkdwn",
          "emoji": false,
          "verbatim": false,
          "text": "section ```code```"
        }
      },
      "block_id": "section1"
    }
  ]
}

Readme

Keywords

none

Package Sidebar

Install

npm i react-slack-renderer

Weekly Downloads

1

Version

0.0.15

License

MIT

Unpacked Size

63.9 kB

Total Files

41

Last publish

Collaborators

  • andycunn