Code Tabs

import { CodeTabs } from '@hanzo/ui'

Default

One tab per language, switching the code shown beneath the strip.

JavaScript

TypeScript

Python

javascript

1function greet(name) {

2 return `Hello, ${name}!`

5console.log(greet("World"))

export function Default() {
  return (
    <YStack width="100%" maxW={640}>
      <CodeTabs tabs={greet} />
    </YStack>
  )
}

Starting tab

`defaultTab` opens on Python rather than the first entry.

JavaScript

TypeScript

Python

python

1def greet(name):

2 return f"Hello, {name}!"

4print(greet("World"))

export function StartingTab() {
  return (
    <YStack width="100%" maxW={640}>
      <CodeTabs tabs={greet} defaultTab={2} />
    </YStack>
  )
}

Themed

A fixed syntax palette and a shorter body before it scrolls.

JavaScript

TypeScript

Python

javascript

1function greet(name) {

2 return `Hello, ${name}!`

5console.log(greet("World"))

export function Themed() {
  return (
    <YStack width="100%" maxW={640}>
      <CodeTabs tabs={greet} theme="dracula" maxHeight={160} />
    </YStack>
  )
}

Empty

The message shown when a `CodeTabs` is given no tabs at all.

No code tabs available. Add tabs to display code snippets.

export function Empty() {
  return (
    <YStack width="100%" maxW={640}>
      <CodeTabs tabs={[]} />
    </YStack>
  )
}

Types

export interface CodeTabsTab {
  label: string
  code: string
  language?: string
  filename?: string
}

export interface CodeTabsProps extends Omit<ComponentProps<typeof Tabs>, 'children' | 'defaultValue' | 'theme' | 'size'> {
  tabs: CodeTabsTab[]
  /** Index of the tab shown first, for an uncontrolled `CodeTabs`. */
  defaultTab?: number
  showLineNumbers?: boolean
  showCopyButton?: boolean
  theme?: CodeBlockTheme | null
  size?: CodeBlockSize | null
  /** The body's ceiling, in px or any CSS length; past it a tab's body scrolls. */
  maxHeight?: number | string
}

Exports

CodeTabstype CodeTabsPropstype CodeTabsTab