jsx-slack

https://github.com/yhatt/jsx-slack
Admin
jsx-slack is a library for building Slack Block Kit messages, modals, and home tabs using JSX...
Tokens:33,003
Snippets:264
Trust Score:8.7
License:MIT
Update:9 months ago
Show doc for...
Tokens:
Raw
### Install jsx-slack

Source: https://context7.com/yhatt/jsx-slack/llms.txt

Installs the jsx-slack library using npm or yarn. This is the first step to using the library in your project.

```bash
npm install --save jsx-slack
# or
yarn add jsx-slack
```

--------------------------------

### JSX Usage with jsx-slack (Babel/TypeScript)

Source: https://github.com/yhatt/jsx-slack/blob/main/docs/how-to-setup-jsx-transpiler.md

Demonstrates how to use jsx-slack components within JSX. This example shows importing `Blocks` and `Section` and rendering them, assuming a correct transpiler configuration is in place.

```jsx
// main.jsx or main.tsx
const { Blocks, Section } = require('jsx-slack')

console.log(
  <Blocks>
    <Section>
      <p>Hello, world!</p>
    </Section>
  </Blocks>,
)
```

--------------------------------

### Deno: Importing jsx-slack using Import Map

Source: https://github.com/yhatt/jsx-slack/blob/main/docs/how-to-setup-jsx-transpiler.md

Demonstrates how to import jsx-slack in Deno using the configured import map. This simplifies imports and makes code more readable.

```tsx
/** @jsxImportSource jsx-slack */
import { Blocks, Section } from 'jsx-slack'

```

--------------------------------

### Quick Start with Template Literal

Source: https://context7.com/yhatt/jsx-slack/llms.txt

Demonstrates using jsx-slack with a tagged template literal, eliminating the need for a JSX transpiler. It shows how to create a simple Slack message with a greeting.

```javascript
import { jsxslack } from 'jsx-slack'

const greeting = ({ name }) => jsxslack`
  <Blocks>
    <Section>
      Hello, <b>${name}</b>!
    </Section>
  </Blocks>
`

console.log(greeting({ name: 'World' }))
// Output: [{ type: 'section', text: { type: 'mrkdwn', text: 'Hello, *World*!', verbatim: true } }]
```

--------------------------------

### Deno: Import Map with Skypack CDN

Source: https://github.com/yhatt/jsx-slack/blob/main/docs/how-to-setup-jsx-transpiler.md

An example of configuring Deno's import map to use jsx-slack from Skypack CDN. This provides an alternative to direct npm imports.

```json
{
  "imports": {
    "jsx-slack": "https://cdn.skypack.dev/jsx-slack?dts",
    "jsx-slack/jsx-runtime": "https://cdn.skypack.dev/jsx-slack/jsx-runtime?dts",
    "jsx-slack/jsx-dev-runtime": "https://cdn.skypack.dev/jsx-slack/jsx-dev-runtime?dts"
  }
}

```

--------------------------------

### Install jsx-slack with yarn

Source: https://github.com/yhatt/jsx-slack/blob/main/README.md

Installs the jsx-slack package using yarn, an alternative package manager for Node.js. This command is similar to the npm installation but uses yarn's syntax.

```bash
yarn add jsx-slack
```

--------------------------------

### Deno: Classic JSX Transform with ESM CDN

Source: https://github.com/yhatt/jsx-slack/blob/main/docs/how-to-setup-jsx-transpiler.md

Sets up the classic JSX transform in Deno using an ESM CDN for jsx-slack. This is for Deno versions prior to v1.28 and requires explicit import of `JSXSlack`.

```jsx
/** @jsx JSXSlack.h **/
/** @jsxFrag JSXSlack.Fragment **/
import { JSXSlack, Blocks, Section } from 'https://esm.sh/jsx-slack@6'

console.log(
  <Blocks>
    <Section>
      <p>Hello, world!</p>
    </Section>
  </Blocks>,
)

```

```jsonc
// tsconfig.json
{
  "compilerOptions": {
    "jsx": "react",
    "jsxFactory": "JSXSlack.h",
    "jsxFragmentFactory": "JSXSlack.Fragment",
    // ...
  },
}

```

--------------------------------

### JSX Slack Comment Pragma for Classic Runtime

Source: https://github.com/yhatt/jsx-slack/blob/main/docs/how-to-setup-jsx-transpiler.md

A comment pragma to specify the JSX factory and fragment for the classic runtime. It directs the transpiler to use `JSXSlack.h` for elements and `JSXSlack.Fragment` for fragments.

```jsx
/** @jsx JSXSlack.h **/
/** @jsxFrag JSXSlack.Fragment **/
```

--------------------------------

### Install jsx-slack with npm

Source: https://github.com/yhatt/jsx-slack/blob/main/README.md

Installs the jsx-slack package using npm, a package manager for Node.js. This command is used in Node.js environments to add the library as a project dependency.

```bash
npm install --save jsx-slack
```

--------------------------------

### Deno: Import Map Configuration for jsx-slack

Source: https://github.com/yhatt/jsx-slack/blob/main/docs/how-to-setup-jsx-transpiler.md

Configures Deno's import map to resolve 'jsx-slack' module names to npm packages. This allows for cleaner imports and compatibility with Node.js.

```json
{
  "imports": {
    "jsx-slack": "npm:jsx-slack@6",
    "jsx-slack/jsx-runtime": "npm:jsx-slack@6/jsx-runtime",
    "jsx-slack/jsx-dev-runtime": "npm:jsx-slack@6/jsx-dev-runtime"
  }
}

```

--------------------------------

### JSX Slack Comment Pragma for Automatic Runtime

Source: https://github.com/yhatt/jsx-slack/blob/main/docs/how-to-setup-jsx-transpiler.md

A comment pragma used to configure the transpiler to use jsx-slack for JSX transformation when the automatic runtime is enabled. This allows per-file configuration.

```jsx
/** @jsxImportSource jsx-slack */
```

--------------------------------

### Build Slack Modals with Modal Container

Source: https://context7.com/yhatt/jsx-slack/llms.txt

Demonstrates creating Slack modal views using the `<Modal>` container. This example includes various input components like text fields, text areas, and conversation selectors, along with hidden and submit inputs.

```jsx
import { JSXSlack, Modal, Section, Divider, Input, Textarea, ConversationsSelect } from 'jsx-slack'

const shareModal = (opts) => JSXSlack(
  <Modal title="Share" close="Cancel">
    <Section>
      <p><strong>Share this content</strong></p>
      <p>jsx-slack supports Slack Modals with input components.</p>
    </Section>
    <Divider />

    <Input type="text" name="subject" label="Subject" required />
    <Textarea name="message" label="Message" maxLength={500} />

    <ConversationsSelect
      name="shareWith"
      label="Share with..."
      required
      include={['public', 'im']}
      excludeBotUsers
      responseUrlEnabled
    />

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

// Use with Slack API
api.views.open({
  trigger_id: 'xxxxx.xxxxx.xxxxxxxxxxxx',
  view: shareModal({ contentId: '12345' }),
})
```

--------------------------------

### TypeScript JSX Transpiler Setup

Source: https://context7.com/yhatt/jsx-slack/llms.txt

Configures the TypeScript compiler to use jsx-slack for JSX transformations. This enables type checking and IDE support for JSX syntax within TypeScript projects.

```jsonc
// tsconfig.json
{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "jsx-slack"
  }
}
```

--------------------------------

### Babel: Classic JSX Runtime Configuration

Source: https://github.com/yhatt/jsx-slack/blob/main/docs/how-to-setup-jsx-transpiler.md

Sets up Babel with the classic JSX runtime for older versions (<= 7.8) or specific use cases. It defines 'JSXSlack.h' as the pragma and 'JSXSlack.Fragment' for fragment creation, requiring explicit imports of JSXSlack.

```javascript
// babel.config.js
module.exports = (api) => ({
  presets: [
    [
      '@babel/preset-react',
      {
        runtime: 'classic',
        pragma: 'JSXSlack.h',
        pragmaFrag: 'JSXSlack.Fragment',
        development: api.env('development'),
      },
    ],
  ],
})
```

--------------------------------

### TypeScript: Wrapping JSX with JSXSlack() Helper

Source: https://github.com/yhatt/jsx-slack/blob/main/docs/how-to-setup-jsx-transpiler.md

Demonstrates the use of the `JSXSlack()` helper function in TypeScript to cast JSX elements before passing them to the Slack API. This is recommended to handle potential type mismatches between JSX and the SDK.

```jsx
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',

  // Wrap in JSXSlack()!
  blocks: JSXSlack(
    <Blocks>
      <Section>
        <p>Hello, world!</p>
      </Section>
    </Blocks>,
  ),
})
```

--------------------------------

### TypeScript: Classic JSX Runtime Configuration (Comment Pragma)

Source: https://github.com/yhatt/jsx-slack/blob/main/docs/how-to-setup-jsx-transpiler.md

Uses a comment pragma to configure TypeScript for the classic JSX runtime with jsx-slack. It defines `jsx: 'JSXSlack.h'` and `jsxFrag: 'JSXSlack.Fragment'`, requiring explicit imports of `JSXSlack`.

```jsx
/** @jsx JSXSlack.h **/
/** @jsxFrag JSXSlack.Fragment **/
import { JSXSlack, Blocks, Section } from 'jsx-slack'

console.log(
  JSXSlack(
    <Blocks>
      <Section>
        <p>Hello, world!</p>
      </Section>
    </Blocks>,
  ),
)
```

--------------------------------

### Post Slack Message using JSX Template and Node.js SDK

Source: https://github.com/yhatt/jsx-slack/blob/main/README.md

This snippet shows how to use the `@slack/web-api` Node.js SDK to post a Slack message. It imports a JSX template (`exampleBlock`) and renders it before sending it to a specified channel. Ensure you have `@slack/web-api` installed and your `SLACK_TOKEN` environment variable is set.

```javascript
import { WebClient } from '@slack/web-api'
import { exampleBlock } from './example.jsx'

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

web.chat
  .postMessage({
    channel: 'C1234567890',
    blocks: exampleBlock({ name: 'Yuki Hattori' }),
  })
  .then((res) => console.log('Message sent: ', res.ts))
  .catch(console.error)
```

--------------------------------

### Deno: Modern JSX Transform with npm

Source: https://github.com/yhatt/jsx-slack/blob/main/docs/how-to-setup-jsx-transpiler.md

Configures Deno to use the modern JSX transform for jsx-slack via npm. Requires Deno v1.28+. This method uses the `@jsxImportSource` pragma and imports directly from npm.

```jsx
// main.tsx
/** @jsxImportSource npm:jsx-slack@6 */
import { Blocks, Section } from 'npm:jsx-slack@6'

console.log(
  <Blocks>
    <Section>
      <p>Hello, world!</p>
    </Section>
  </Blocks>,
)

```

```jsonc
// tsconfig.json
{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "npm:jsx-slack@6",
    // ...
  },
}

```

--------------------------------

### Basic Slack Message with JSX Transpiler

Source: https://context7.com/yhatt/jsx-slack/llms.txt

Shows how to use jsx-slack with a JSX transpiler (like Babel or TypeScript) to create a basic Slack message. This example uses the `<Blocks>` and `<Section>` components.

```tsx
import { JSXSlack, Blocks, Section } from 'jsx-slack'
import { WebClient } from '@slack/web-api'

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

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

--------------------------------

### JSX Usage with Automatic Runtime

Source: https://github.com/yhatt/jsx-slack/blob/main/docs/highlight/v2.md

Example demonstrating how to use JSX components with jsx-slack's automatic runtime. Components like Blocks, Section, and p can be used directly without explicit imports of JSXSlack, leading to more intuitive code.

```jsx
const { Blocks, Section } = require('jsx-slack')

console.log(
  <Blocks>
    <Section>
      <p>Hello, world!</p>
    </Section>
  </Blocks>,
)
```

--------------------------------

### Compose Modal with Input Components using <Modal>

Source: https://github.com/yhatt/jsx-slack/blob/main/docs/block-containers.md

Illustrates a more complex usage of the <Modal> component, demonstrating how to include input elements like text fields, textareas, and select menus within a modal. This example utilizes JSXSlack's syntax for form-like structures.

```jsx
/** @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>
)
```

--------------------------------

### TypeScript: tsconfig.json for Classic JSX

Source: https://github.com/yhatt/jsx-slack/blob/main/docs/how-to-setup-jsx-transpiler.md

Configures TypeScript's `tsconfig.json` for the classic JSX runtime using jsx-slack. It sets `jsx: 'react'`, `jsxFactory: 'JSXSlack.h'`, and optionally `jsxFragmentFactory: 'JSXSlack.Fragment'` (for TypeScript >= v4.0).

```jsonc
// tsconfig.json
{
  "compilerOptions": {
    "jsx": "react",
    "jsxFactory": "JSXSlack.h",
    // NOTE: jsxFragmentFactory is available only in TypeScript >= v4.0.
    "jsxFragmentFactory": "JSXSlack.Fragment",
    // ...
  },
}
```

--------------------------------

### TypeScript: tsconfig.json for Automatic JSX

Source: https://github.com/yhatt/jsx-slack/blob/main/docs/how-to-setup-jsx-transpiler.md

Sets up TypeScript's `tsconfig.json` to globally use jsx-slack for JSX transpilation. It specifies `jsx: 'react-jsx'` and `jsxImportSource: 'jsx-slack'` to enable the automatic JSX runtime across the project.

```jsonc
// tsconfig.json
{
  "compilerOptions": {
    "jsx": "react-jsx", // or "react-jsxdev" for development
    "jsxImportSource": "jsx-slack",
    // ...
  },
}
```

--------------------------------

### Simulate HTML Lists with jsx-slack

Source: https://github.com/yhatt/jsx-slack/blob/main/docs/html-like-formatting.md

This example demonstrates how to simulate unordered (<ul>) and ordered (<ol>) lists in Slack messages using jsx-slack. It showcases nested lists and attributes like 'type' for ordered lists and 'value' for list items, rendering them as plain text with appropriate indentation and markers.

```jsx
<ul>
  <li>Item A</li>
  <li>
    Item B
    <ul>
      <li>Sub item 1</li>
      <li>
        Sub item 2
        <ul>
          <li>and more...</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>
    Item C
    <ol>
      <li>Ordered item 1</li>
      <li>
        Ordered item 2
        <ol type="I">
          <li>Ordered sub item with type 1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
          <li>5...</li>
        </ol>
      </li>
    </ol>
  </li>
</ul>
```

--------------------------------

### Build Slack Messages with Blocks Container

Source: https://context7.com/yhatt/jsx-slack/llms.txt

Utilizes the `<Blocks>` container from jsx-slack to construct complex Slack messages. This example shows how to combine various Block Kit elements like sections, context, dividers, and actions with buttons and images.

```jsx
import { JSXSlack, Blocks, Section, Divider, Actions, Button, Context, Image } from 'jsx-slack'
import { WebClient } from '@slack/web-api'

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

api.chat.postMessage({
  channel: 'C1234567890',
  blocks: JSXSlack(
    <Blocks>
      <Section>
        <p>Enjoy building blocks!</p>
        <blockquote>
          <b><a href="https://github.com/yhatt/jsx-slack">jsx-slack</a></b>
          <br />
          <i>Build JSON for Slack Block Kit from JSX</i>
        </blockquote>
        <img src="https://github.com/yhatt.png" alt="yhatt" />
      </Section>
      <Context>
        Maintained by <a href="https://github.com/yhatt">Yuki Hattori</a>
        <img src="https://github.com/yhatt.png" alt="yhatt" />
      </Context>
      <Divider />
      <Actions>
        <Button url="https://github.com/yhatt/jsx-slack">GitHub</Button>
        <Button url="https://npm.im/jsx-slack">npm</Button>
      </Actions>
    </Blocks>
  ),
})
```

--------------------------------

### Display an Image Block in JSX Slack

Source: https://github.com/yhatt/jsx-slack/blob/main/docs/layout-blocks.md

Provides an example of how to display an image block using the `<Image>` component in JSX Slack. This component accepts `src`, `alt`, and optional `title` props, similar to the `<img>` HTML element. The `src` and `alt` props are required.

```jsx
<Blocks>
  <Image src="https://placekitten.com/500/500" alt="So cute kitten." />
</Blocks>
```

--------------------------------

### Create Slack Button Interactive Element with jsx-slack

Source: https://context7.com/yhatt/jsx-slack/llms.txt

Demonstrates the creation of a Button interactive element, used for triggering actions or opening URLs. This example shows different button types, including action buttons with values, link buttons, buttons with confirmation dialogs, and buttons with accessibility labels.

```jsx
import { JSXSlack, Blocks, Actions, Button, Confirm } from 'jsx-slack'

const buttons = JSXSlack(
  <Blocks>
    <Actions>
      {/* Action button with value */}
      <Button actionId="action" value="clicked" style="primary">
        Action button
      </Button>

      {/* Link button */}
      <Button url="https://example.com/">Open URL</Button>

      {/* Button with confirmation dialog */}
      <Button
        actionId="delete"
        value="delete"
        style="danger"
        confirm={
          <Confirm title="Delete item" confirm="Yes, delete" deny="Cancel">
            <b>Are you sure?</b> This action cannot be undone.
          </Confirm>
        }
      >
        Delete
      </Button>

      {/* Button with accessibility label */}
      <Button actionId="close" value="close" aria-label="Close this dialog">
        X
      </Button>
    </Actions>
  </Blocks>
)
```

--------------------------------

### Build Slack blocks with jsxslack template literal tag

Source: https://github.com/yhatt/jsx-slack/blob/main/README.md

Demonstrates using the 'jsxslack' tagged template literal to construct Slack Block Kit elements. This method does not require a JSX transpiler setup and utilizes HTM for parsing.

```javascript
import { jsxslack } from 'jsx-slack'

export const exampleBlock = ({ name }) => jsxslack`
  <Blocks>
    <Section>
      Hello, <b>${name}</b>!
    </Section>
  </Blocks>
`
```

--------------------------------

### Create Text Input Elements with JSX-Slack

Source: https://github.com/yhatt/jsx-slack/blob/main/docs/block-elements.md

This example demonstrates how to create various types of single-line input fields using the `<Input>` component within a `<Modal>`. It showcases different input types (`text`, `url`, `email`, `number`) and common props like `label`, `type`, `name`, `placeholder`, `required`, and validation constraints (`maxLength`, `min`, `max`).

```jsx
<Modal title="My App">
  <Input label="Title" type="text" name="title" maxLength={80} required />
  <Input label="URL" type="url" name="url" placeholder="https://..." />
  <Input label="Email" type="email" name="email" required />
  <Input label="Number" type="number" name="num" required min={1} max={100} />
</Modal>
```

--------------------------------

### Design Slack Home Tab with JSX Components

Source: https://github.com/yhatt/jsx-slack/blob/main/README.md

Illustrates building the Slack Home tab interface using jsx-slack components. This includes images, headers, dividers, sections, action buttons, and radio button groups, demonstrating a rich UI for a user's Slack Home tab.

```jsx
<Home>
  <Image src="https://source.unsplash.com/random/960x240?home" alt="home" />
  <Header>Welcome back to my home! :house_with_garden:</Header>
  <Divider />
  <Section>What's next?</Section>
  <Actions>
    <RadioButtonGroup actionId="next">
      <RadioButton value="tickets" checked>
        <b>See assigned tickets</b> :ticket:
        <small>
          <i>Check your tickets to start your work.</i>
        </small>
      </RadioButton>
      <RadioButton value="reminder">
        <b>Remind a task later</b> :memo:
        <small>
          <i>I'll remember a task for you.</i>
        </small>
      </RadioButton>
      <RadioButton value="pomodoro">
        <b>Start pomodoro timer</b> :tomato:
        <small>
          <i>Get focused on your time, with tomato!</i>
        </small>
      </RadioButton>
    </RadioButtonGroup>
    <Button actionId="start" style="primary">
      Start working
    </Button>
  </Actions>
</Home>
```

--------------------------------

### TypeScript: Automatic JSX Import Source Configuration

Source: https://github.com/yhatt/jsx-slack/blob/main/docs/how-to-setup-jsx-transpiler.md

Configures TypeScript to use jsx-slack as the source for JSX transformations using the 'react-jsx' mode. This is achieved via a comment pragma within the TSX file.

```tsx
// main.tsx
/** @jsxImportSource jsx-slack */
import { Blocks, Section } from 'jsx-slack'

console.log(
  <Blocks>
    <Section>
      <p>Hello, world!</p>
    </Section>
  </Blocks>,
)
```

--------------------------------

### Build Slack App Home Tab View with jsx-slack

Source: https://context7.com/yhatt/jsx-slack/llms.txt

Demonstrates how to construct an App Home tab view using JSX components. This view is then passed to the `views.publish` API. It utilizes components like Home, Image, Header, Divider, Section, Actions, RadioButtonGroup, RadioButton, and Button.

```jsx
import { JSXSlack, Home, Image, Header, Divider, Section, Actions, RadioButtonGroup, RadioButton, Button } from 'jsx-slack'

const homeTab = (user) => JSXSlack(
  <Home>
    <Image src="https://source.unsplash.com/random/960x240?home" alt="home" />
    <Header>Welcome back, {user.name}!</Header>
    <Divider />
    <Section>What's next?</Section>
    <Actions>
      <RadioButtonGroup actionId="next">
        <RadioButton value="tickets" checked>
          <b>See assigned tickets</b>
          <small><i>Check your tickets to start your work.</i></small>
        </RadioButton>
        <RadioButton value="reminder">
          <b>Remind a task later</b>
          <small><i>I'll remember a task for you.</i></small>
        </RadioButton>
      </RadioButtonGroup>
      <Button actionId="start" style="primary">Start working</Button>
    </Actions>
  </Home>
)

api.views.publish({
  user_id: 'UXXXXXXXX',
  view: homeTab({ name: 'John' }),
})
```

--------------------------------

### Build Slack blocks with JSX transpiler

Source: https://github.com/yhatt/jsx-slack/blob/main/README.md

Shows how to build Slack Block Kit elements using JSX syntax with a transpiler. This requires setting up the JSX import source to 'jsx-slack' and typically involves Babel or TypeScript configuration.

```jsx
/** @jsxImportSource jsx-slack */
import { Blocks, Section } from 'jsx-slack'

export const exampleBlock = ({ name }) => (
  <Blocks>
    <Section>
      Hello, <b>{name}</b>!
    </Section>
  </Blocks>
)
```

--------------------------------

### Create a Modal with Input Components in JSX

Source: https://github.com/yhatt/jsx-slack/blob/main/docs/layout-blocks.md

Demonstrates how to construct a modal using jsx-slack's Input, UsersSelect, and Textarea components. This approach mimics familiar HTML form styling for user input within Slack modals. It requires the 'jsx-slack' library.

```jsx
<Modal title="My App">
  <Input type="text" name="subject" label="Subject" required />
  <UsersSelect
    label="User"
    title="Please select one of users."
    required
    placeholder="Choose user..."
  />
  <Textarea name="message" label="Message" maxLength={500} />
</Modal>
```

--------------------------------

### Bolt Framework Integration with jsx-slack for Slack Apps

Source: https://context7.com/yhatt/jsx-slack/llms.txt

This snippet demonstrates a complete integration of jsx-slack with the Bolt framework. It shows how to set up a Bolt app, handle slash commands to open modal views, and process modal submissions to post formatted messages with interactive buttons. Dependencies include '@slack/bolt' and 'jsx-slack'.

```javascript
import { App } from '@slack/bolt'
import { JSXSlack, Blocks, Section, Actions, Button, Modal, Input, Textarea, Confirm } from 'jsx-slack'

const app = new App({
  token: process.env.SLACK_BOT_TOKEN,
  signingSecret: process.env.SLACK_SIGNING_SECRET,
})

// Respond to a slash command
app.command('/feedback', async ({ command, ack, client }) => {
  await ack()

  await client.views.open({
    trigger_id: command.trigger_id,
    view: JSXSlack(
      <Modal title="Submit Feedback" callbackId="feedback_modal">
        <Input type="text" name="subject" label="Subject" required maxLength={100} />
        <Textarea name="feedback" label="Your Feedback" required maxLength={1000} />
        <Input type="hidden" name="user_id" value={command.user_id} />
        <Input type="submit" value="Submit" />
      </Modal>
    ),
  })
})

// Handle modal submission
app.view('feedback_modal', async ({ ack, view, client }) => {
  await ack()

  const values = view.state.values
  const metadata = JSON.parse(view.private_metadata || '{}')

  await client.chat.postMessage({
    channel: 'C_FEEDBACK_CHANNEL',
    blocks: JSXSlack(
      <Blocks>
        <Section>
          <p><b>New Feedback Received</b></p>
          <p>From: <a href={`@${metadata.user_id}`} /></p>
        </Section>
        <Section>
          <p><b>Subject:</b> {values.subject_block.subject.value}</p>
          <p>{values.feedback_block.feedback.value}</p>
        </Section>
        <Actions>
          <Button
            actionId="mark_resolved"
            value={metadata.user_id}
            style="primary"
            confirm={
              <Confirm title="Resolve" confirm="Yes" deny="No">
                Mark this feedback as resolved?
              </Confirm>
            }
          >
            Mark Resolved
          </Button>
        </Actions>
      </Blocks>
    ),
  })
})

;(async () => {
  await app.start(3000)
  console.log('Slack app is running!')
})()

```

--------------------------------

### Improved Error Message Example in jsx-slack v2

Source: https://github.com/yhatt/jsx-slack/blob/main/docs/highlight/v2.md

Highlights the improved error message generated by jsx-slack v2 for an invalid JSX structure within an `<Actions>` block. The new message clearly identifies the problematic component and the reason for the incompatibility.

```jsx
<Actions> cannot include the element for selection from multiple options: <ConversationsSelect multiple>
```

--------------------------------

### Configure Babel for Automatic JSX Runtime

Source: https://github.com/yhatt/jsx-slack/blob/main/docs/highlight/v2.md

This configuration enables Babel's automatic JSX runtime for jsx-slack. It sets the import source to 'jsx-slack' and dynamically configures the 'development' flag based on the environment. This setup eliminates the need to manually import JSXSlack.

```javascript
// babel.config.js
module.exports = (api) => ({
  presets: [
    [
      '@babel/preset-react',
      {
        runtime: 'automatic',
        importSource: 'jsx-slack',
        development: api.env('development'),
      },
    ],
  ],
})
```

--------------------------------

### Create Slack Message with <Blocks>

Source: https://github.com/yhatt/jsx-slack/blob/main/docs/block-containers.md

Demonstrates how to use the <Blocks> component to create a basic Slack message payload for the chat.postMessage API. It wraps a Section component containing 'Hello, world!'.

```javascript
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>
  ),
})
```

--------------------------------

### Improved Error Reporting in jsx-slack v2

Source: https://github.com/yhatt/jsx-slack/blob/main/docs/highlight/v2.md

Shows an example of an invalid JSX structure that would produce a vague error in jsx-slack v1. The v2 update significantly enhances error messages to pinpoint the exact cause and offending component, aiding in faster debugging.

```jsx
// v1 throws "<Actions> block has an incompatible element as children.", but which element is?
<Blocks>
  <Actions>
    <ConversationsSelect name="conversations" multiple />
    <Button name="send" style="primary">
      Send
    </Button>
    <Button name="cancel" style="danger">
      Cancel
    </Button>
  </Actions>
</Blocks>
```

--------------------------------

### Create Links with jsx-slack

Source: https://github.com/yhatt/jsx-slack/blob/main/docs/html-like-formatting.md

This snippet shows how to create hyperlinks in Slack messages using the `<a>` tag in jsx-slack. It covers creating standard web links, links to Slack channels (using channel IDs), and mentions for users and user groups (using user or user group IDs).

```jsx
<a href="https://example.com/">Link</a>
<a href="#C01234ABCDE" />
<a href="@U56789FGHIJ" />
<a href="@S56789PQRST" />
<a href="@here" />
```

--------------------------------

### Publish Slack Home Tab View with <Home>

Source: https://github.com/yhatt/jsx-slack/blob/main/docs/block-containers.md

Demonstrates how to publish a home tab view to Slack using the views.publish API and the <Home> component. This requires a user ID and a view payload generated by the <Home> component.

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

--------------------------------

### Import jsxslack template literal tag in Deno

Source: https://github.com/yhatt/jsx-slack/blob/main/README.md

Imports the 'jsxslack' template literal tag from the jsx-slack npm package for use in Deno environments. Requires Deno v1.28 or later. This enables using jsx-slack without a JSX transpiler setup.

```typescript
// `jsxslack` template literal tag
import { jsxslack } from 'npm:jsx-slack@6'
```

--------------------------------

### Setting Initial State with `selected` Attribute in JSX

Source: https://github.com/yhatt/jsx-slack/blob/main/docs/highlight/v2.md

Demonstrates how to use the `selected` attribute within `<option>` tags in JSX to set the initial state for multiple select elements. This approach aligns with HTML standards for defining default selections.

```jsx
<Blocks>
  <section>
    <p>Select options:</p>
    <select multiple name="options">
      <option selected>Option A</option>
      <option selected>Option B</option>
      <option>Option C</option>
    </select>
  </section>
</Blocks>
```

--------------------------------

### SelectFragment: Generating Options for External Select in JavaScript/Express

Source: https://github.com/yhatt/jsx-slack/blob/main/docs/block-elements.md

The `<SelectFragment>` component, used with the `jsxslack` tagged template literal, generates JSON objects suitable for Slack's external data sources. This example demonstrates its use within an Express.js route to serve options dynamically.

```javascript
import { jsxslack } from 'jsx-slack'
import express from 'express'

const app = express()

app.get('/external-data-source', (req, res) => {
  res.json(jsxslack`
    <SelectFragment>
      <Option value="item-a">Item A</Option>
      <Option value="item-b">Item B</Option>
      <Option value="item-c">Item C</Option>
    </SelectFragment>
  `)
})

app.listen(80)
```

--------------------------------

### Setting Initial State with `value` Prop in JSX

Source: https://github.com/yhatt/jsx-slack/blob/main/docs/highlight/v2.md

Illustrates the preferred method of setting initial selected options using the `value` prop on the parent select component, rather than the `selected` attribute on individual options. This provides a centralized way to manage the initial state.

```jsx
<Blocks>
  <section>
    <b>NOTE: Prefer the parent `value` prop to `selected` state.</b>
    <select multiple name="options" value="c">
      <option value="a" selected>
        Option A
      </option>
      <option value="b" selected>
        Option B
      </option>
      <option value="c">Option C (Actually selected)</option>
    </select>
  </section>
</Blocks>
```

--------------------------------

### Define Fields for a Section Block in JSX Slack

Source: https://github.com/yhatt/jsx-slack/blob/main/docs/layout-blocks.md

Shows how to use the `<Field>` component within a `<Section>` block to create two-column text content, in addition to the main text. Fields are displayed after the main text content. This example also includes an image as part of the section.

```jsx
<Blocks>
  <Section>
    About this repository:
    <Field>
      <b>Name</b>
      <br />
      yhatt/jsx-slack
    </Field>
    <Field>
      <b>Maintainer</b>
      <br />
      Yuki Hattori
    </Field>
    <Image src="https://github.com/yhatt.png" alt="yhatt" />
  </Section>
</Blocks>
```

--------------------------------

### Basic Layout Blocks in JSX Slack

Source: https://context7.com/yhatt/jsx-slack/llms.txt

Demonstrates the use of fundamental layout blocks like Image, Header, Divider, and Video in jsx-slack for structuring Slack messages. These components help in organizing content and embedding media.

```jsx
import { JSXSlack, Blocks, Image, Header, Divider, Video, Context } from 'jsx-slack'

const richMessage = JSXSlack(
  <Blocks>
    <Header>Weekly Newsletter</Header>
    <Divider />

    <Image
      src="https://example.com/banner.jpg"
      alt="Newsletter banner"
      title="This week's highlights"
    />

    <Context>
      <img src="https://example.com/icon.png" alt="icon" />
      Published on {new Date().toLocaleDateString()}
    </Context>

    <Divider />

    <Video
      src="https://www.youtube.com/embed/dQw4w9WgXcQ"
      alt="Featured video"
      title="How to use our product"
      poster="https://i.ytimg.com/vi/dQw4w9WgXcQ/hqdefault.jpg"
      authorName="Product Team"
      description="A quick tutorial on getting started."
      providerName="YouTube"
    />
  </Blocks>
)
```

--------------------------------

### Build Slack Message Layouts with JSX Components

Source: https://github.com/yhatt/jsx-slack/blob/main/README.md

Demonstrates using jsx-slack components to construct the structure of a Slack message, including sections, context, dividers, and actions with buttons. This JSX code translates into Block Kit JSON.

```jsx
<Blocks>
  <Section>
    <p>Enjoy building blocks!</p>
    <blockquote>
      <b>
        <a href="https://github.com/yhatt/jsx-slack">jsx-slack</a>
      </b>
      <br />
      <i>Build JSON for Slack Block Kit from JSX</i>
    </blockquote>
    <img src="https://github.com/yhatt.png" alt="yhatt" />
  </Section>
  <Context>
    Maintained by <a href="https://github.com/yhatt">Yuki Hattori</a>
    <img src="https://github.com/yhatt.png" alt="yhatt" />
  </Context>
  <Divider />
  <Actions>
    <Button url="https://github.com/yhatt/jsx-slack">GitHub</Button>
    <Button url="https://npm.im/jsx-slack">npm</Button>
  </Actions>
</Blocks>
```

--------------------------------

### Define a Checkbox item with description in JSX

Source: https://github.com/yhatt/jsx-slack/blob/main/docs/block-elements.md

This example shows how to define a single checkbox item within a Slack message using JSX. It includes a value, bolded text, and an optional description rendered using JSX's ability to embed HTML-like formatting and small text for additional details.

```jsx
<Checkbox
  value="checkbox"
  description={
    <>
      XXX-1234 - <i>by Yuki Hattori</i>
    </>
  }
>
  <b>Checkbox item</b>: foobar
</Checkbox>
```

--------------------------------

### CheckboxGroup Initial State Logic (v1 vs v2)

Source: https://github.com/yhatt/jsx-slack/blob/main/docs/highlight/v2.md

Illustrates the difference in handling initial checked states for CheckboxGroup between jsx-slack v1 and v2. Version 1 merged initial states from both `<Checkbox checked>` and `<CheckboxGroup values>`, while v2 prioritizes `<CheckboxGroup values>` and ignores `<Checkbox checked>` if `values` is present.

```jsx
// In jsx-slack v1, B and C will set as initial options.
<Home>
  <Actions>
    <CheckboxGroup values={['b']}>
      <Checkbox value="a">A</Checkbox>
      <Checkbox value="b">B</Checkbox>
      <Checkbox value="c" checked>
        C
      </Checkbox>
    </CheckboxGroup>
  </Actions>
</Home>
```

--------------------------------

### Control Slack's Automatic Parsing with verbatim Prop in JSX

Source: https://github.com/yhatt/jsx-slack/blob/main/docs/block-elements.md

This snippet demonstrates how to use the `verbatim` prop in jsx-slack components like `<Mrkdwn>`, `<Confirm>`, and `<Section>` to control Slack's automatic parsing of links, mentions, and conversation names. Setting `verbatim={false}` enables Slack's preprocessing, while `verbatim={true}` disables it. The example showcases its usage within various block types.

```jsx
<Blocks>
  {/* Section block */}
  <Section>
    <Mrkdwn verbatim={false}>https://example.com/</Mrkdwn>
  </Section>

  {/* Section block with fields */}
  <Section>
    <Field>
      <Mrkdwn verbatim={false}>#general</Mrkdwn>
    </Field>
  </Section>

  {/* Context block */}
  <Context>
    <Mrkdwn verbatim={false}>@here</Mrkdwn>
    Hello!
  </Context>

  {/* Confirm composition object */}
  <Actions>
    <Button
      confirm={
        <Confirm title="Commit your action" confirm="Yes, please" deny="Cancel">
          <Mrkdwn verbatim={false}>
            <b>@foobar</b> Are you sure?
          </Mrkdwn>
        </Confirm>
      }
    >
      Button
    </Button>
  </Actions>
</Blocks>
```

--------------------------------

### Create Custom Components with <Fragment> in jsx-slack

Source: https://context7.com/yhatt/jsx-slack/llms.txt

This snippet illustrates how to create reusable custom Slack block components using the `<Fragment>` component in jsx-slack. It shows defining a custom `Heading` component that combines multiple blocks and demonstrates its usage both directly and with template literals using `jsxslack`.

```jsx
import { Fragment, Section, Divider, Blocks } from 'jsx-slack'

// Define a custom Heading component
const Heading = ({ children }) => (
  <Fragment>
    <Section>
      <b>{children}</b>
    </Section>
    <Divider />
  </Fragment>
)

// Use the custom component
const message = (
  <Blocks>
    <Heading>
      <i>jsx-slack custom block</i>
    </Heading>
    <Section>Let's build your block.</Section>
  </Blocks>
)

// With template literal (built-in fragment support)
import { jsxslack } from 'jsx-slack'

const HeadingLiteral = ({ children }) => jsxslack`
  <Section>
    <b>${children}</b>
  </Section>
  <Divider />
`

const messageLiteral = jsxslack`
  <Blocks>
    <${HeadingLiteral}>Custom Header<//>
    <Section>Content here</Section>
  </Blocks>
`

```

--------------------------------

### Import Blocks and Section for JSX transpilation in Deno

Source: https://github.com/yhatt/jsx-slack/blob/main/README.md

Imports 'Blocks' and 'Section' components from the jsx-slack npm package for use with a JSX transpiler in Deno. This requires Deno v1.28 or later and specific JSX import source configuration.

```typescript
// JSX transpilation
/** @jsxImportSource npm:jsx-slack@6 */
import { Blocks, Section } from 'npm:jsx-slack@6'
```
Tokens:
Raw