slackblock

0.4.0 • Public • Published

SlackBlock

React-based Slack message renderer

CircleCI

What

A message builder for Slack bots, using JSX / React syntax. Generally follows the Block Kit naming and options

Getting started

Install the library with npm i slackblock

  • Import the renderer with import render from 'slackblock';
  • Import the top level Message block, along with any blocks you need from import { Message, Section, Text, ... } from 'slackblock/block';
  • Build your message!
/* example */

const text = <Text plainText>Hello</Text>;

const message = render(
  <Message>
    <Section text={text}>
      <Text>Some *message* for _Slack_.</Text>
    </Section>
  </Message>
);

console.log(message);
/*
  {
    "blocks": [
      {
        "type": "section",
        "text": {
          "text": "plain_text",
          "text": "Hello"
        },
        "fields": [
          {
            "type": "mrkdwn",
            "text": "Some *message* for _Slack_."
          }
        ]
      }
    ]
  }
*/

There is a <Container/> component, which allows for conditional rendering by passing through the children as though it didn't exist.

const elem = (
  <Container>
    <Text>Test</Text>
  </Container>
);

const shouldDoThing = ...;

const message = render(
  <Message>
    {shouldDoThing && elem}
  </Message>
);

Things to note

  • The outputted message only needs to have your token and desired channel_id added, and it will be ready to send to the slack API!
  • There is current very little to no input validation. Non-recognized blocks will be ignored, but Slack will be the ultimate decider if your message is valid. Validation is on the roadmap.
  • There is currently almost no documentation. This will be resolved, but in general...
    • If a Slack message wants a property in format foo_bar, you will add it as a fooBar property in your message(ex: <Element fooBar='blah'/>)
    • If a component such as a <Section/> wants fields which seem like children, they probably are for the sake of rendering. This is especially important with select menus, as your <Option/> tags will be passed as children
      • ex:
        <Select ...>
          <Option value="val">text</Option>
          <Option value="val2">text2</Option>
        </Select>

TODO

  • Add real documentation
  • Expose types
  • Add validation

Readme

Keywords

Package Sidebar

Install

npm i slackblock

Weekly Downloads

12

Version

0.4.0

License

MIT

Unpacked Size

121 kB

Total Files

125

Last publish

Collaborators

  • kolyaventuri