Build / Molecules

CodeSnippet

molecule
play-fn

A block of code to copy and paste — an embed tag, a webhook payload, a CLI line.

CopyField's sibling for the case where the value is more than one line and its shape matters. A single-line input collapses newlines and hides everything past its own width, which is exactly wrong for a snippet whose indentation and line breaks are the thing being copied.

The code stays real, selectable <code> text rather than an input, so it can be read, partially selected, and copied by hand when the clipboard API is unavailable or denied. Wide lines scroll inside the block; the page never does.

import { CodeSnippet } from '@meetcard/deck'

Example

<CodeSnippet label="Inline embed" description="Paste into any page." code={'<script src="https://cdn.meetcard.io/embed.js" async></script>'} />

Stories

Every preview below is the real component, rendered in this page from the same story Storybook runs. The width control resizes each preview's container; CSS media queries still follow the browser window, so breakpoint behaviour is worth checking in Storybook.

Default

Source

const Default = () => <div style={{ maxWidth: 520 }}>
    <CodeSnippet
        label="Inline embed"
        description="Paste this into any page where the booking widget should appear."
        code={`<script src="https://cdn.meetcard.io/embed.js" async></script>
        <meetcard-book type="person" handle="ben@meetcard" display="inline"></meetcard-book>`} />
</div>;

One line is still a snippet when the angle brackets matter.

Single Line

Source

const SingleLine = () => <div style={{ maxWidth: 520 }}>
    <CodeSnippet
        label="Script tag"
        description={undefined}
        code="<script src=\"https://cdn.meetcard.io/embed.js\" async></script>" />
</div>;

A line longer than the column scrolls inside the block. The page itself never scrolls sideways.

Overflowing Line

Source

const OverflowingLine = () => <div style={{ maxWidth: 520 }}>
    <CodeSnippet
        label="Webhook payload"
        description={undefined}
        code="curl -X POST https://api.meetcard.io/v1/connections --header \"Authorization: Bearer sk_live_51H8xQ2eZvKYlo2C\" --data '{\"event\":\"card.exchanged\"}'" />
</div>;

When the surrounding card already says what the code is.

Label Hidden

Source

const LabelHidden = () => <div style={{ maxWidth: 520 }}>
    <CodeSnippet
        label="Inline embed"
        description={undefined}
        code={`<script src="https://cdn.meetcard.io/embed.js" async></script>
        <meetcard-book type="person" handle="ben@meetcard" display="inline"></meetcard-book>`}
        hideLabel />
</div>;

Props

Prop	Type	Default	Description
`code`required	`string`	—	The code, exactly as it should be pasted. Newlines are preserved.
`label`required	`ReactNode`	—	Names the block, e.g. "Inline embed". Shown unless `hideLabel`.
`className`	`string`	—	—
`copyLabel`	`string`	`'Copy code'`	Accessible name for the copy control, before a copy succeeds.
`description`	`ReactNode`	—	A line under the label saying where this goes.
`hideLabel`	`boolean`	`false`	Keep the label for screen readers but hide it visually.
`id`	`string`	—	—