Help

Code Block

Allows you to render highlighted code snippets

cURL

Medusa JS SDK

/product-detail.js

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

Was this example helpful?

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

Prop	Type	Default
`snippets`	`CodeSnippet[]`	-

Was this helpful?

CodeBlock.Header#

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

Prop	Type	Default
`hideLabels`	`boolean`	`false`

Was this helpful?

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:

/product-detail.js

12345678910
// Install the JS SDK in your storefront project: @medusajs/js-sdk

import Medusa from "@medusajs/js-sdk"

const medusa = new Medusa({
  baseUrl: import.meta.env.NEXT_PUBLIC_BACKEND_URL || "/",
  publishableKey: process.env.NEXT_PUBLIC_MEDUSA_PAK
})
const { product } = await medusa.store.products.retrieve("prod_123")
console.log(product.id)

Was this example helpful?

No Header#

You could also choose to omit the header entirely:

12345678910
// Install the JS SDK in your storefront project: @medusajs/js-sdk

import Medusa from "@medusajs/js-sdk"

const medusa = new Medusa({
  baseUrl: import.meta.env.NEXT_PUBLIC_BACKEND_URL || "/",
  publishableKey: process.env.NEXT_PUBLIC_MEDUSA_PAK
})
const { product } = await medusa.store.products.retrieve("prod_123")
console.log(product.id)

Was this example helpful?

No Line Numbers#

Medusa JS SDK

/product-detail.js

// Install the JS SDK in your storefront project: @medusajs/js-sdk

import Medusa from "@medusajs/js-sdk"

const medusa = new Medusa({
  baseUrl: import.meta.env.NEXT_PUBLIC_BACKEND_URL || "/",
  publishableKey: process.env.NEXT_PUBLIC_MEDUSA_PAK
})
const { product } = await medusa.store.products.retrieve("prod_123")
console.log(product.id)

Was this example helpful?

No Copy Button#

Medusa JS SDK

/product-detail.js

12345678910
// Install the JS SDK in your storefront project: @medusajs/js-sdk

import Medusa from "@medusajs/js-sdk"

const medusa = new Medusa({
  baseUrl: import.meta.env.NEXT_PUBLIC_BACKEND_URL || "/",
  publishableKey: process.env.NEXT_PUBLIC_MEDUSA_PAK
})
const { product } = await medusa.store.products.retrieve("prod_123")
console.log(product.id)

Was this example helpful?