Data display

Code block

The labelled code panel from the schema page, with a copy button.

import { CodeBlock } from '@jsonresume/ui'Source(opens in a new tab)

Examples

Basic

resume.json

{
  "basics": {
    "name": "John Doe",
    "label": "Programmer",
    "email": "john@gmail.com"
  }
}

code-block/basic.tsx

import { CodeBlock } from '@jsonresume/ui';

const sample = `{
  "basics": {
    "name": "John Doe",
    "label": "Programmer",
    "email": "john@gmail.com"
  }
}`;

export default function CodeBlockBasic() {
  return <CodeBlock label="resume.json" code={sample} />;
}

Accessibility

The code region is focusable so keyboard users can scroll it.
"Copied" is announced through a polite live region.

Props

Also accepts the attributes of the element CodeBlock renders.
Prop	Type	Default	Description
code required	string	–	The code, as plain text.
copyable	boolean	true	Show a copy button. Defaults to true.
label	ReactNode	–	Header label, e.g. a file name or language.