/phelia

⚡ A reactive Slack application framework.

Primary LanguageTypeScriptMIT LicenseMIT

⚡ 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