@neo4j-ndl/react/skills/ndl-react/components/code-block.md

React implementation of Neo4j Design System

# CodeBlock

Import: `import { CodeBlock } from '@neo4j-ndl/react'`

## Props

### CodeBlock

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `actions` | `(IconButtonButtonProps & { as?: "button"; } & BaseProps<"button">)[]` |  |  |  |
| `as` | `ElementType<any, keyof IntrinsicElements>` |  |  | An override of the default HTML tag of the root of the component. Can also be another React component. |
| `code` | `string` | ✅ |  |  |
| `heading` | `ReactNode` |  |  |  |
| `isDisabled` | `boolean` |  |  |  |
| `language` | `'asciidoc' \| 'bash' \| 'c' \| 'csharp' \| 'css-extras' \| 'css' \| 'cypher' \| 'docker' \| 'go' \| 'graphql' \| 'java' \| 'javadoc' \| 'javascript' \| 'json' \| 'jsx' \| 'kotlin' \| 'php' \| 'python' \| 'regex' \| 'rust' \| 'sql' \| 'text' \| 'typescript' \| 'xml' \| 'yaml'` | ✅ |  |  |
| `maxHeight` | `number` |  |  |  |
| `ref` | `any` |  |  | A ref to apply to the root element. |
| `shouldShowLineNumbers` | `boolean` |  |  |  |
| `theme` | `'base16-ateliersulphurpool.light' \| 'coy' \| 'duotone-light' \| 'ghcolors' \| 'ndl-code-dark' \| 'ndl-code-light' \| 'prism' \| 'solarizedlight' \| 'vs'` |  |  |  |

## Examples

### Code Default

```tsx
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';

import { CodeBlock } from '@neo4j-ndl/react';

import { SHORT_CODE_EXAMPLE } from './example-code-snippets';

const Component = () => {
  return <CodeBlock code={SHORT_CODE_EXAMPLE} language="typescript" />;
};

export default Component;
```

### Code Disabled

```tsx
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';

import { CodeBlock } from '@neo4j-ndl/react';
import {
  PlayCircleIconOutline,
  Square2StackIconOutline,
} from '@neo4j-ndl/react/icons';

import { SHORT_CODE_EXAMPLE } from './example-code-snippets';

const Component = () => {
  return (
    <CodeBlock
      code={SHORT_CODE_EXAMPLE}
      language="typescript"
      heading="Code Header"
      isDisabled
      actions={[
        {
          children: (
            <Square2StackIconOutline className="n-text-neutral-text-icon" />
          ),
          description: 'copy',
          htmlAttributes: { title: 'copy' },
          onClick: () => alert('This should not trigger when disabled'),
        },
        {
          children: <PlayCircleIconOutline className="n-text-primary-icon" />,
          description: 'run',
          htmlAttributes: { title: 'run' },
          onClick: () => alert('This should not trigger when disabled'),
        },
      ]}
    />
  );
};

export default Component;
```

### Code Full

```tsx
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';

import { CodeBlock } from '@neo4j-ndl/react';
import {
  PlayCircleIconOutline,
  Square2StackIconOutline,
} from '@neo4j-ndl/react/icons';

import { LONG_CODE_EXAMPLE } from './example-code-snippets';

const Component = () => {
  return (
    <CodeBlock
      code={LONG_CODE_EXAMPLE}
      maxHeight={320}
      language="typescript"
      shouldShowLineNumbers
      theme="ndl-code-light"
      heading="Code Header"
      actions={[
        {
          children: (
            <Square2StackIconOutline className="n-text-neutral-text-icon" />
          ),
          description: 'copy',
          htmlAttributes: { title: 'copy' },
          onClick: () => alert('copied'),
        },
        {
          children: <PlayCircleIconOutline className="n-text-primary-icon" />,
          description: 'run',
          htmlAttributes: { title: 'run' },
          onClick: () => alert('running'),
        },
      ]}
      isDisabled={false}
    />
  );
};

export default Component;
```

### Code Languages

```tsx
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';

import { CodeBlock } from '@neo4j-ndl/react';

import { LANGUAGE_SYNTAX_HIGHLIGHTING_EXAMPLES } from './example-code-snippets';

const Component = () => {
  return (
    <div className="n-flex n-flex-col n-gap-token-8">
      <CodeBlock
        code={LANGUAGE_SYNTAX_HIGHLIGHTING_EXAMPLES.TYPESCRIPT}
        language="typescript"
        heading="TypeScript"
        shouldShowLineNumbers
      />

      <CodeBlock
        code={LANGUAGE_SYNTAX_HIGHLIGHTING_EXAMPLES.CYPHER}
        language="cypher"
        heading="Cypher Query Language"
        shouldShowLineNumbers
      />

      <CodeBlock
        code={LANGUAGE_SYNTAX_HIGHLIGHTING_EXAMPLES.JSON}
        language="json"
        heading="JSON Configuration"
        shouldShowLineNumbers
      />
    </div>
  );
};

export default Component;
```

### Code Overflow

```tsx
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';

import { CodeBlock } from '@neo4j-ndl/react';

import { LONG_CODE_EXAMPLE } from './example-code-snippets';

const Component = () => {
  return (
    <CodeBlock
      code={LONG_CODE_EXAMPLE}
      language="typescript"
      heading="Code Header"
      maxHeight={320}
    />
  );
};

export default Component;
```

### Code With Actions

```tsx
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';

import { CodeBlock } from '@neo4j-ndl/react';
import {
  PlayCircleIconOutline,
  Square2StackIconOutline,
} from '@neo4j-ndl/react/icons';

import { SHORT_CODE_EXAMPLE } from './example-code-snippets';

const Component = () => {
  return (
    <CodeBlock
      code={SHORT_CODE_EXAMPLE}
      language="typescript"
      maxHeight={320}
      actions={[
        {
          children: (
            <Square2StackIconOutline className="n-text-neutral-text-icon" />
          ),
          description: 'copy',
          htmlAttributes: { title: 'copy' },
          onClick: () => alert('Code copied to clipboard!'),
        },
        {
          children: <PlayCircleIconOutline className="n-text-primary-icon" />,
          description: 'run',
          htmlAttributes: { title: 'run' },
          onClick: () => alert('Running code...'),
        },
      ]}
    />
  );
};

export default Component;
```

### Code With Header

```tsx
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';

import { CodeBlock } from '@neo4j-ndl/react';

import { SHORT_CODE_EXAMPLE } from './example-code-snippets';

const Component = () => {
  return (
    <CodeBlock
      code={SHORT_CODE_EXAMPLE}
      language="typescript"
      heading="Code Header"
    />
  );
};

export default Component;
```

### Code With Line Numbers

```tsx
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';

import { CodeBlock } from '@neo4j-ndl/react';

import { SHORT_CODE_EXAMPLE } from './example-code-snippets';

const Component = () => {
  return (
    <CodeBlock
      code={SHORT_CODE_EXAMPLE}
      language="typescript"
      heading="Code Header"
      shouldShowLineNumbers
    />
  );
};

export default Component;
```