block-containers.md

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 'jsx-slack'

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

api.chat.postMessage({
  channel: 'C1234567890',
  blocks: (
    <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: (
    <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 'jsx-slack'

export const shareModal = (opts) => (
  <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

• type (optional): Set a type of modal.
  • modal (default): The regular modal surface.
  • workflow_step: The modal surface for custom workflow step.

• privateMetadata (optional): An optional string that can be found in payloads of some interactive events Slack app received (3000 characters maximum). By setting function, you can use the custom transformer to serialize hidden values set up via <Input type="hidden">.
• callbackId (optional): An identifier for this modal to recognize it in various events. (255 characters maximum)

Props for modal type

• 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)
• 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.
• 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.

Props for workflow_step type

• submit (optional): By setting as false, the submit button will be disabled until one or more inputs have filled. It is corresponding with submit_disabled field in a configuration view object.

<Home>: The view container for home tabs

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: (
    <Home>
      <Section>Welcome to my home!</Section>
    </Home>
  ),
})

As same as <Modal>, <Home> can place input components as the direct child.

Props

• privateMetadata (optional): An optional string that can be found in payloads of some interactive events Slack app received. (3000 characters maximum) By setting function, you can use the custom transformer to serialize hidden values set up via <Input type="hidden">.
• 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