jsx-slack/types/block-kit/container/Home.d.ts

Build JSON object for Slack Block Kit surfaces from JSX

import { JSXSlack } from '../../jsx';
import { PrivateMetadataTransformer } from './utils';
interface HomeProps {
    children: JSXSlack.ChildNodes;
    /**
     * An identifier for this view to recognize it in various events from Slack.
     */
    callbackId?: string;
    /** A unique ID for all views on a per-team basis. */
    externalId?: string;
    /**
     * An optional metadata string for handling stored data in callback events
     * from Slack API. (3000 characters maximum)
     *
     * If not defined, the home tab container will use values defined in
     * `<Input type="hidden">` as metadata stringified to JSON.
     *
     * ### Custom transformer
     *
     * You can also customize how to transform hidden values into string by
     * passing the custom transformer function.
     *
     * @example
     * ```jsx
     * <Home
     *   privateMetadata={(hidden) => hidden && new URLSearchParams(hidden).toString()}
     * >
     *   <Input type="hidden" name="A" value="foobar" />
     *   <Input type="hidden" name="B" value={123} />
     *   <Input type="hidden" name="C" value={true} />
     * </Home>
     * ```
     *
     * In this example, the private metadata would be `A=foobar&B=123&C=true` by
     * transformation using `URLSearchParams`.
     *
     * The transformer takes an argument: JSON object of hidden values, or
     * `undefined` when there was no hidden values. It must return the transformed
     * string, or `undefined` if won't assign private metadata.
     */
    privateMetadata?: string | PrivateMetadataTransformer;
}
/**
 * The container component for the view of
 * [home tabs](https://api.slack.com/surfaces/tabs).
 *
 * `<Home>` can include following block elements:
 *
 * - `<Section>` (`<section>`)
 * - `<Image>` (`<img>`)
 * - `<Divider>` (`<hr>`)
 * - `<Header>` (`<header>`)
 * - `<Context>`
 * - `<Actions>`
 * - `<Input>` (`<input>`)
 * - `<Video>` (`<video>`)
 *
 * And these input components (Require defining `label` prop):
 *
 * - `<Input label="...">` (`<input label="...">`)
 * - `<Textarea label="...">` (`<textarea label="...">`)
 * - `<Select label="...">` (`<select label="...">`)
 * - `<ExternalSelect label="...">`
 * - `<UsersSelect label="...">`
 * - `<ConversationsSelect label="...">`
 * - `<ChannelsSelect label="...">`
 * - `<DatePicker label="...">`
 * - `<TimePicker label="...">`
 * - `<DateTimePicker label="...">`
 * - `<CheckboxGroup label="...">`
 * - `<RadioButtonGroup label="...">`
 *
 * @example
 * ```jsx
 * api.views.publish({
 *   user_id: 'UXXXXXXXX',
 *   view: (
 *     <Home>
 *       <Section>Welcome to my home!</Section>
 *     </Home>
 *   ),
 * })
 * ```
 *
 * **NOTE**: TypeScript requires to cast JSX into suited type / `any`, or wrap
 * with `JSXSlack(<Home>...</Home>)`.
 *
 * @return The object of `view` payload, for `view` field in
 *   [`views.publish`](https://api.slack.com/methods/views.publish) API.
 */
export declare const Home: import("../../jsx-internals").BuiltInComponent<HomeProps>;
export {};