⚡ Phelia

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.

Quick start

1. 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>
     );
   }
   

2. 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");
   

3. Interact with your message:

   

See: docs for more info or join our community Slack.

How this works

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.

Components

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.

1. Surface Components (Message, Home, Modal) - Root components that contains Block Components
2. Block Components (Actions, Context, Divider, Image, Input, Section) - Direct descendants of a Surface Component. Contains Block Components
3. Block Element Components (Text, CheckBoxes, TextField, etc) - Direct descendants of a Block Components.

Feature Support

To request a feature submit a new issue.

Component		Example
Actions	✅	Counter
Button	✅	Counter
Channel Select Menus	✅	Channel Select Menu
Checkboxes	✅	Modal Example
Confirmation dialog	✅	Random Image
Context	✅
Conversation Select Menus	✅	Conversation Select Menu
Date Picker	✅	Birthday Picker
Divider	✅	Random Image
External Select Menus	✅	External Select Menu
Home Tab	✅	Home App Example
Image Block	✅	Random Image
Image	✅	Random Image
Input	✅	Modal Example
Messages	✅	Server
Modals	✅	Modal Example
Multi channels select Menu	✅	Multi Channels Select Menu
Multi conversations select Menu	✅	Multi Conversations Select Menu
Multi external select Menu	✅	Multi External Select Menu
Multi static select Menu	✅	Multi Static Select Menu
Multi users select Menu	✅	Multi Users Select Menu
Option group	✅	Static Select Menu
Option	✅
Overflow Menu	✅	Overflow Menu
Plain-text input	✅	Modal Example
Radio button group	✅	Radio Buttons
Section	✅	Counter
Static Select Menus	✅	Static Select Menu
Text	✅	Counter
Text	✅	Random Image
User Select Menus	✅	User Select Menu