Code Block
Allows you to render highlighted code snippets
cURL
Medusa JS Client
Medusa React
curl -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 of its props
Prop | Type | Default |
---|---|---|
snippets | CodeSnippet[] | - |
Was this section 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 section 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
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:
1234import { useProduct } from "medusa-react"const { product } = useProduct("PRODUCT_ID")console.log(product.id)
Was this example helpful?
No Header
You could also choose to omit the header entirely:
1234import { useProduct } from "medusa-react"const { product } = useProduct("PRODUCT_ID")console.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?