Functiondiscord-component-embedv0.1.0

toComponentEmbedScript

Returns the <script> tag Discord reads for a component embed, as an HTML string. Use it in a framework other than React, where you write raw HTML into the page yourself.

Throws:

ComponentEmbedError when the tree breaks a rule of the format.

toComponentEmbedScript(root: ReactElement): string

// src/routes/[...slug]/+page.server.ts in SvelteKit
import { createElement as h } from 'react';

export const load: PageServerLoad = async ({ params }) => {
    const page = await getGuidePage(params.slug);
    const title = h(TextDisplay, null, `# ${page.title}`);
    const preview = h(Container, { accentColor: 0xf8f6e8 }, title);

    // +page.svelte writes it with {@html data.preview} inside <svelte:head>
    return { page, preview: toComponentEmbedScript(preview) };
};

root

root: ReactElement

Functiondiscord-component-embedv0.1.0

toComponentEmbedScript

Returns the <script> tag Discord reads for a component embed, as an HTML string. Use it in a framework other than React, where you write raw HTML into the page yourself.

Throws:

ComponentEmbedError when the tree breaks a rule of the format.

toComponentEmbedScript(root: ReactElement): string

// src/routes/[...slug]/+page.server.ts in SvelteKit
import { createElement as h } from 'react';

export const load: PageServerLoad = async ({ params }) => {
    const page = await getGuidePage(params.slug);
    const title = h(TextDisplay, null, `# ${page.title}`);
    const preview = h(Container, { accentColor: 0xf8f6e8 }, title);

    // +page.svelte writes it with {@html data.preview} inside <svelte:head>
    return { page, preview: toComponentEmbedScript(preview) };
};

root

root: ReactElement