Code Block
Allows you to render highlighted code snippets
cURL
Medusa JS Client
Medusa React
1curl -H 'x-publishable-key: YOUR_API_KEY' 'http://localhost:9000/store/products/PRODUCT_ID'
Was this example helpful?
Usage
import { CodeBlock } from "@medusajs/ui"
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 props of this element.
Prop | Type | Default |
---|---|---|
snippets | CodeSnippet[] | - |
Was this section helpful?
CodeBlock.Header
This component is based on the div
element and supports all props of this element.
Prop | Type | Default |
---|---|---|
hideLabels | boolean | false |
Was this section helpful?
CodeBlock.Header.Meta
This component is based on the div
element and supports all props of this element.
CodeBlock.Body
This component is based on the div
element and supports all props of this element.
Prop | Type | Default |
---|---|---|
hideLineNumbers | boolean | false |
Was this section helpful?
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:
1import { useProduct } from "medusa-react"23const { product } = useProduct("PRODUCT_ID")4console.log(product.id)
Was this example helpful?
No Header
You could also choose to omit the header entirely:
1import { useProduct } from "medusa-react"23const { product } = useProduct("PRODUCT_ID")4console.log(product.id)
Was this example helpful?
No Line Numbers
Medusa React
import { useProduct } from "medusa-react"const { product } = useProduct("PRODUCT_ID")console.log(product.id)
Was this example helpful?