Code Block

Allows you to render highlighted code snippets

cURL
Medusa JS SDK
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

PropTypeDefault
snippets
CodeSnippet[]
-
Was this helpful?

CodeBlock.Header#

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

PropTypeDefault
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:

// 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:

// 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
// 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?
Ask Anything
FAQ
What is Medusa?
How can I create a module?
How can I create a data model?
How do I create a workflow?
How can I extend a data model in the Product Module?
Recipes
How do I build a marketplace with Medusa?
How do I build digital products with Medusa?
How do I build subscription-based purchases with Medusa?
What other recipes are available in the Medusa documentation?
Chat is cleared on refresh
Line break