Pheli – React for Slack Apps

栏目: IT技术 · 发布时间: 4年前

内容简介:Build interactive Slack apps without webhooks or JSON headache. If you know React, you know how to make a Slack app.See:

Pheli – React for Slack Apps

:zap: 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
             
              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:

    Pheli – React for Slack Apps

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

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

计算机网络(第7版)

计算机网络(第7版)

谢希仁 / 电子工业出版社 / 2017-1 / 45.00

本书自1989年首次出版以来,曾于1994年、1999年、2003年、2008年和2013年分别出了修订版。在2006年本书通过了教育部的评审,被纳入普通高等教育“十一五”国家级规划教材;2008年出版的第5版获得了教育部2009年精品教材称号。2013年出版的第6版是“十二五”普通高等教育本科国家级规划教材。 目前2017年发行的第7版又在第6版的基础上进行了一些修订。 全书分为9章,比较......一起来看看 《计算机网络(第7版)》 这本书的介绍吧!

随机密码生成器
随机密码生成器

多种字符组合密码

URL 编码/解码
URL 编码/解码

URL 编码/解码

html转js在线工具
html转js在线工具

html转js在线工具