SlackBlock
React-based Slack message renderer
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 fromimport { 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 desiredchannel_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 afooBar
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 withselect
menus, as your<Option/>
tags will be passed as children- ex:
<Select ...> <Option value="val">text</Option> <Option value="val2">text2</Option> </Select>
- If a Slack message wants a property in format
TODO
- Add real documentation
- Expose types
- Add validation