CodeBlock

Tier: clientUnstable

ExamplesCopy Anchor Link

$ npm i @nizivo/react

import type { JSX } from 'react';
import { CodeBlock } from '@nizivo/react/unstable/code-block';

export function CodeBlockExample(): JSX.Element {
  return (
    <CodeBlock
      variant="command"
      items={[
        { label: 'npm', code: 'npm i @nizivo/react' },
        { label: 'pnpm', code: 'pnpm add @nizivo/react' },
        { label: 'yarn', code: 'yarn add @nizivo/react' },
      ]}
    />
  );
}

import { Button } from '@nizivo/react/button';

export function Save() {
  return <Button variant="primary">Save product</Button>;
}

import type { JSX } from 'react';
import { CodeBlock } from '@nizivo/react/unstable/code-block';

export function CodeBlockSnippetExample(): JSX.Element {
  return (
    <CodeBlock
      items={[
        {
          label: 'tsx',
          code: [
            "import { Button } from '@nizivo/react/button';",
            '',
            'export function Save() {',
            '  return <Button variant="primary">Save product</Button>;',
            '}',
          ].join('\n'),
        },
        { label: 'css', code: `@import '@nizivo/react/styles.css';` },
      ]}
    />
  );
}

ImportCopy Anchor Link

import { CodeBlock } from '@nizivo/react/unstable/code-block';

// Once per app (Getting started), after
// @nizivo/tokens/tokens.css and @nizivo/react/css/base.css and @nizivo/react/css/copy-button.css and @nizivo/react/css/tabs.css
import '@nizivo/react/css/code-block.css';

Static or interactiveCopy Anchor Link

Client. Its versions are Tabs and its Copy is a CopyButton. How to choose.

ContentCopy Anchor Link

items lists the versions (label and code), in tab order; one item shows its label instead of tabs. variant="command" puts a "$" before one shell line (it is not copied); a snippet shows lines as written. Copy copies the version shown. Code never wraps: a long line scrolls sideways, and the code takes focus so a keyboard can scroll it too.

PropsCopy Anchor Link

Other exportsCopy Anchor Link

CodeBlockItem type

import type { CodeBlockItem } from '@nizivo/react/unstable/code-block'

One version of the code: "pnpm" and its command, "tsx" and its snippet.

Name	Type	Default	Description
coderequired	string	–
labelrequired	string	–

CodeBlockLabels type

import type { CodeBlockLabels } from '@nizivo/react/unstable/code-block'

CodeBlock's own strings (§16.4): serialisable, English defaults.

Name	Type	Default	Description
versionsrequired	string	'Versions'	The tablist's name.

CodeBlockProps type

import type { CodeBlockProps } from '@nizivo/react/unstable/code-block'

The props of CodeBlock, listed above.

Data attributes and slotsCopy Anchor Link

Style parts by class (.nz-<slot>) and state by data attribute. Attribute meanings come from contracts/vocabulary.json.

CSS hooksCopy Anchor Link

Set a hook on the component's class or any ancestor to restyle it without specificity games; leave it unset for the default shown.

This stylesheet reads no public hook.

Layers: nz.components. Classes: .nz-code-block, .nz-code-block-bar, .nz-code-block-code, .nz-code-block-label, .nz-code-block-prompt, .nz-code-block-tabs, .nz-tabs-list, .nz-tabs-tab.

AccessibilityCopy Anchor Link

These parts are interactive. Each gets the focus outline and touch-action rule from @nizivo/react/css/base.css (the nz.base layer), so the floor survives a restyle:

• code-block-code: draws the focus outline itself on keyboard focus.

KeyboardCopy Anchor Link

To be written.