CodeExample
A rendered example with the code that makes it, in one frame.
Overview
Documentation that shows a part and its source together.
Preview
Do
<Button variant="primary">Save</Button>import { Button, CodeExample } from "@hackcove/ui";
<CodeExample code={'<Button variant="primary">Save</Button>'}>
<Button variant="primary">Save</Button>
</CodeExample>CodeExample frames a rendered part with the code that makes it, in one box.Don't
<Button variant="primary">Save</Button>import { Button, CodeBlock, Stack } from "@hackcove/ui";
<Stack gap="sm">
<Button variant="primary">Save</Button>
<CodeBlock>{'<Button variant="primary">Save</Button>'}</CodeBlock>
</Stack>CodeBlock under it is two unrelated things: no shared frame, and they drift apart.Usage
- Put the rendered part in
childrenand its source incode, a string with the newlines kept. captionis one note on the example, the last band of the frame.- Side by side in a grid, each frame is its own height, so do not pad the previews to match.
- A wide preview or a long line of code scrolls inside the frame; it does not widen the page.
- Only for documentation. A command to copy is a
CopyLine, and code alone is aCodeBlock.
Accessibility
- A
<figure>holds the preview and the code in<pre><code>;captionis its<figcaption>. aria-*anddata-*go on the figure.
API
CodeExample
One framed example: the rendered children on top and the code that makes them attached underneath, in a single bordered box with one divider between. No client JS. An optional caption is the frame's last band. The code is React, so it is coloured as TSX. The preview is its own height, never padded to match a neighbour, down to a shared minimum so two frames side by side start alike. A wide preview or a long line of code scrolls inside the frame instead of widening the page or wrapping.
captionOne note on the example, under the code.
- Type
ReactNode
code requiredThe source shown under the preview, newlines kept.
- Type
string