⚡ 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 |