Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
114 lines (82 sloc) 6.93 KB
Top » JSX components for Block Kit » Block containers

Block containers

Slack provides multiple surfaces to place Block Kit layout blocks. So you should choose the parent container component depending on purpose.

<Blocks>: The basic container for messages

A basic container component for Block Kit suited to messages. Wrap layout block components in <Blocks>.

When composing message for using in API such as chat.postMessage, you should pass generated array by <Blocks> container component to blocks field in payloads.

import { WebClient } from '@slack/client'
import JSXSlack, { Blocks, Section } from '@speee-js/jsx-slack'

const api = new WebClient(process.env.SLACK_TOKEN)

api.chat.postMessage({
  channel: 'C1232456',
  blocks: JSXSlack(
    <Blocks>
      <Section>Hello, world!</Section>
    </Blocks>
  ),
})

<Modal>: The view container for modals

The container component for modals. You can build view payload for modal through JSX.

A generated object by <Modal> container should pass to a view field in views.* API payloads.

api.views.open({
  // NOTE: trigger_id received from interaction is required.
  trigger_id: 'xxxxx.xxxxx.xxxxxxxxxxxx',
  view: JSXSlack(
    <Modal title="My first modal">
      <Section>Hello, modal!</Section>
    </Modal>
  ),
})

In addition to layout blocks, <Modal> container can place input components as the children directly. So you can compose blocks for modal with predictable JSX template inspired from HTML form.

/** @jsx JSXSlack.h */
import JSXSlack, { Modal, ConversationsSelect } from '@speee-js/jsx-slack'

export default function shareModal(opts) {
  return JSXSlack(
    <Modal title="Share" close="Cancel">
      <img src={opts.url} alt="image" />

      <input type="text" name="subject" label="Subject" required />
      <textarea name="comment" label="Comment" maxLength={500} />
      <ConversationsSelect name="shareWith" label="Share with..." required />

      <input type="hidden" name="userId" value={opts.userId} />
      <input type="submit" value="Share" />
    </Modal>
  )
}

Props

  • title (required): An user-facing title of the modal. (24 characters maximum)
  • close (optional): A text for close button of the modal. (24 characters maximum)
  • submit (optional): A text for submit button of the modal. The value specified in this prop is preferred than <Input type="submit"> (24 characters maximum)
  • privateMetadata (optional): An optional string that can be found in payloads of some interactive events Slack app received. The value specified in this prop is preferred than <Input type="hidden">. (3000 characters maximum)
  • clearOnClose (optional): If enabled by setting true, all stacked views will be cleared by close button.
  • notifyOnClose (optional): If enabled by setting true, view_closed event will be sent to request URL of Slack app when closed modal.
  • callbackId (optional): An identifier for this modal to recognize it in various events. (255 characters maximum)
  • externalId (optional): A unique ID for all views on a per-team basis.

ℹ️ Slack requires the submit text when modal has component for inputs, so jsx-slack would set the text "Submit" as the default value of submit prop if you are setting no submit text in any way together with using input components.

<Home>: The view container for home tabs (experimental)

The container component for home tabs. You can build view payload for home tab.

A generated object by <Home> container should pass to a view field in views.publish API payloads.

api.views.publish({
  user_id: 'UXXXXXXXX',
  view: JSXSlack(
    <Home>
      <Section>Welcome to my home!</Section>
    </Home>
  ),
})

⚠️ <Home> container component is experimental. Slack's home tab is currently open beta, so we expect its spec might be updated with high-frequency.

Props

  • privateMetadata (optional): An optional string that can be found in payloads of some interactive events Slack app received. (3000 characters maximum)
  • callbackId (optional): An identifier for this modal to recognize it in various events. (255 characters maximum)
  • externalId (optional): A unique ID for all views on a per-team basis.

Top » JSX components for Block Kit » Block containers
You can’t perform that action at this time.