toComponentEmbed

Converts a <Container> tree into the JSON document Discord reads for a component embed. To write the JSON into a page, use toComponentEmbedJson or toComponentEmbedScript. Both escape it for HTML.

Throws:

a ComponentEmbedError when the tree breaks a rule of the format, or when your own code throws while the tree is read. Check error.code to see which.

toComponentEmbed(root: EmbedElement): ComponentEmbedPayload

const payload = toComponentEmbed(
    <Container accentColor={0xf8f6e8}>
        <TextDisplay># seedcord</TextDisplay>
    </Container>
);
// payload.component.accent_color is 16316136
// payload.component.components is [{ type: 10, content: '# seedcord' }]

// catch a broken preview in CI
for (const page of await getAllGuidePages()) {
    expect(() => toComponentEmbed(<GuidePreview page={page} />)).not.toThrow();
}

root

root: EmbedElement

Loading…

Functiondiscord-component-embedv0.2.1

toComponentEmbed

Throws:

a ComponentEmbedError when the tree breaks a rule of the format, or when your own code throws while the tree is read. Check error.code to see which.

toComponentEmbed(root: EmbedElement): ComponentEmbedPayload

const payload = toComponentEmbed(
    <Container accentColor={0xf8f6e8}>
        <TextDisplay># seedcord</TextDisplay>
    </Container>
);
// payload.component.accent_color is 16316136
// payload.component.components is [{ type: 10, content: '# seedcord' }]

// catch a broken preview in CI
for (const page of await getAllGuidePages()) {
    expect(() => toComponentEmbed(<GuidePreview page={page} />)).not.toThrow();
}

root

root: EmbedElement