React for Slack Apps
Build interactive Slack apps without webhooks or JSON headache. If you know React, you know how to make a Slack app.
-
Create your message with React:
import randomImage from "../utils"; export function RandomImage({ useState }: PheliaMessageProps) { const [imageUrl, setImageUrl] = useState("imageUrl", randomImage()); return ( <Message text="Choose a dog"> <ImageBlock title="an adorable :dog:" alt="a very adorable doggy dog" imageUrl={imageUrl} emoji /> <Divider /> <Actions> <Button style="primary" action="randomImage" onClick={() => setImageUrl(randomImage())} > New doggy </Button> </Actions> </Message> ); }
-
Register your component
const client = new Phelia(process.env.SLACK_TOKEN); app.post( "/interactions", client.messageHandler(process.env.SLACK_SIGNING_SECRET, [RandomImage]) ); client.postMessage(RandomImage, "@max");
-
Interact with your message:
See: docs for more info or join our community Slack.
Phelia transforms React components into Slack messages by use of a custom React reconciler. Components (with their internal state and props) are serialized into a custom storage. When a user interacts with a posted message Phelia retrieves the component, re-hydrates it's state and props, and performs any actions which may result in a new state.
Each component is a mapping of a specific object type for a slack block. There are 3 categories of components, each with special rules for how that component can be used with other components.
- Surface Components (Message, Home, Modal) - Root components that contains Block Components
- Block Components (Actions, Context, Divider, Image, Input, Section) - Direct descendants of a Surface Component. Contains Block Components
- Block Element Components (Text, CheckBoxes, TextField, etc) - Direct descendants of a Block Components.
To request a feature submit a new issue.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent
%5CnSpend:%20$4,289.70%5CnRemain:%20$13,710.30%22%7D,%7B%22type%22:%22mrkdwn%22,%22text%22:%22*Top%20Expense%20Categories*%5Cn:airplane:%20Flights%20%C2%B7%2030%25%5Cn:taxi:%20Taxi%20/%20Uber%20/%20Lyft%20%C2%B7%2024%25%20%5Cn:knife_fork_plate:%20Client%20lunch%20/%20meetings%20%C2%B7%2018%25%22%7D%5D%7D,%7B%22type%22:%22context%22,%22elements%22:%5B%7B%22type%22:%22image%22,%22image_url%22:%22https://api.slack.com/img/blocks/bkb_template_images/placeholder.png%22,%22alt_text%22:%22placeholder%22%7D%5D%7D,%7B%22type%22:%22header%22,%22text%22:%7B%22type%22:%22plain_text%22,%22text%22:%22Expenses%20Awaiting%20Your%20Approval%22%7D%7D,%7B%22type%22:%22divider%22%7D,%7B%22type%22:%22context%22,%22elements%22:%5B%7B%22type%22:%22mrkdwn%22,%22text%22:%22Submitted%20by%22%7D,%7B%22type%22:%22image%22,%22image_url%22:%22https://api.slack.com/img/blocks/bkb_template_images/profile_3.png%22,%22alt_text%22:%22Dwight%20Schrute%22%7D,%7B%22type%22:%22mrkdwn%22,%22text%22:%22*Dwight%20Schrute*%22%7D%5D%7D,%7B%22type%22:%22section%22,%22text%22:%7B%22type%22:%22mrkdwn%22,%22text%22:%22*Team%20Lunch%20(Internal)*%5CnCost:%20*$85.50USD*%5CnDate:%20*10/16/2019*%5CnService%20Provider:%20*Honest%20Sandwiches*%20%20%5CnExpense%20no.%20*%3Cfakelink.toUrl.com%7C#1797PD%3E*%22%7D,%22accessory%22:%7B%22type%22:%22image%22,%22image_url%22:%22https://api.slack.com/img/blocks/bkb_template_images/creditcard.png%22,%22alt_text%22:%22credit%20card%22%7D%7D,%7B%22type%22:%22actions%22,%22elements%22:%5B%7B%22type%22:%22button%22,%22text%22:%7B%22type%22:%22plain_text%22,%22text%22:%22Approve%22,%22emoji%22:true%7D,%22style%22:%22primary%22,%22value%22:%22approve%22%7D,%7B%22type%22:%22button%22,%22text%22:%7B%22type%22:%22plain_text%22,%22text%22:%22Decline%22,%22emoji%22:true%7D,%22style%22:%22danger%22,%22value%22:%22decline%22%7D,%7B%22type%22:%22button%22,%22text%22:%7B%22type%22:%22plain_text%22,%22text%22:%22View%20Details%22,%22emoji%22:true%7D,%22value%22:%22details%22%7D%5D%7D,%7B%22type%22:%22divider%22%7D,%7B%22type%22:%22context%22,%22elements%22:%5B%7B%22type%22:%22mrkdwn%22,%22text%22:%22Submitted%20by%22%7D,%7B%22type%22:%22image%22,%22image_url%22:%22https://api.slack.com/img/blocks/bkb_template_images/profile_2.png%22,%22alt_text%22:%22Pam%20Beasely%22%7D,%7B%22type%22:%22mrkdwn%22,%22text%22:%22*Pam%20Beasely*%22%7D%5D%7D,%7B%22type%22:%22section%22,%22text%22:%7B%22type%22:%22mrkdwn%22,%22text%22:%22*Flights%20to%20New%20York*%5CnCost:%20*$520.78USD*%5CnDate:%20*10/18/2019*%5CnService%20Provider:%20*Delta%20Airways*%5CnExpense%20no.%20*%3Cfakelink.toUrl.com%7C#1803PD%3E*%22%7D,%22accessory%22:%7B%22type%22:%22image%22,%22image_url%22:%22https://api.slack.com/img/blocks/bkb_template_images/plane.png%22,%22alt_text%22:%22plane%22%7D%7D,%7B%22type%22:%22actions%22,%22elements%22:%5B%7B%22type%22:%22button%22,%22text%22:%7B%22type%22:%22plain_text%22,%22text%22:%22Approve%22,%22emoji%22:true%7D,%22style%22:%22primary%22,%22value%22:%22approve%22%7D,%7B%22type%22:%22button%22,%22text%22:%7B%22type%22:%22plain_text%22,%22text%22:%22Decline%22,%22emoji%22:true%7D,%22style%22:%22danger%22,%22value%22:%22decline%22%7D,%7B%22type%22:%22button%22,%22text%22:%7B%22type%22:%22plain_text%22,%22text%22:%22View%20Details%22,%22emoji%22:true%7D,%22value%22:%22details%22%7D%5D%7D%5D%7D){kind=link}