Code Block

curl -H 'x-publishable-key: YOUR_API_KEY' 'http://localhost:9000/store/products/PRODUCT_ID'

Usage#

Code
import { CodeBlock } from "@medusajs/ui"

Code
1<CodeBlock 2  snippets={[3    { 4      language: "tsx", 5      label: "Label", 6      code: "import { useProduct } from \"medusa-react\"",7    },8  ]}9>10  <CodeBlock.Header />11  <CodeBlock.Body />12</CodeBlock>

API Reference#

CodeBlock

This component is based on the div element and supports all of its props

CodeBlock.Header

This component is based on the div element and supports all of its props

CodeBlock.Header.Meta

This component is based on the div element and supports all of its props

CodeBlock.Body

This component is based on the div element and supports all of its props

Usage Outside Medusa Admin#

If you're using the CodeBlock component in a project other than the Medusa Admin, make sure to include the TooltipProvider somewhere up in your component tree, as the CodeBlock.Header component uses a Tooltip:

Code
1<TooltipProvider>2  <CodeBlock 3    snippets={[4      { 5        language: "tsx", 6        label: "Label", 7        code: "import { useProduct } from \"medusa-react\"",8      },9    ]}10  >11    <CodeBlock.Header />12    <CodeBlock.Body />13  </CodeBlock>14</TooltipProvider>

Examples#

Single snippet#

If you want to only show a code sample for one language or API, you can choose to hide the snippet labels:

1234
import { useProduct } from "medusa-react"

const { product } = useProduct("PRODUCT_ID")
console.log(product.id)

No Header#

You could also choose to omit the header entirely:

1234
import { useProduct } from "medusa-react"

const { product } = useProduct("PRODUCT_ID")
console.log(product.id)

No Line Numbers#

import { useProduct } from "medusa-react"

const { product } = useProduct("PRODUCT_ID")
console.log(product.id)